Featured countdown timer

This guide describes the Featured countdown timer section.

Use the section to display a countdown timer on a page.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Configure the Featured countdown timer section

To configure your Featured countdown timer section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Featured countdown timer section.

   Note

   The section can be added into any page, except Checkout, Gift card and Customer pages. To add the section to the current page, select Add section > Featured countdown timer. Refer to Shopify help: Add a section.

2. From the side menu, select Featured countdown timer.

3. Select a setting described in the following table.

Setting name	Description
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove section	Select Remove section to delete the section from the current page.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon that's displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.

Configure a block within a Featured countdown timer section

To configure a block for your Featured countdown timer section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Featured countdown timer section.

2. From the side menu, expand the Featured countdown timer section menu.

3. To configure an existing block, select the block from the side menu.

   To add a new block, select Add block, choose a block to add, and then select the block you added.

   Note

   Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

4. Apply a block setting described in the following table.

Block name	Description	Setting
Rich text	Displays an area with formatted body text and links inside the section.	In the Heading field, enter text to display as a title inside the block. In the Text field, enter text to display as body text inside the block. Format the text and add links using the inline editor. Use the Text alignment options to align the block's text to Left, Center, or Right. Set the Add space above option to on or off. With this option enabled an area of empty or "whitespace" is displayed above the block. Use the Call to action > Link field to enter an external URL or to select a link to display inside the block. Adding a dedicated “Call to action” block will override this option. In the Call to action > Text field, enter text to display as a label for the block's link. Adding a dedicated “Call to action” block will override this option. Use the Call to action > Style options to apply a standard text Link or Button style for displaying links inside the block. Adding a dedicated “Call to action” block will override this option. Use the Call to action > Button style options to apply the Primary or Secondary button style to the block's button. To enable this option, set the Style option to Button. Adding a dedicated “Call to action” block will override this option. Use the Desktop layout > Width options to set a maximum width for the block's text area to Full, Two thirds, or Half. This option applies only on desktop display devices. Use the Desktop layout > Position options to specify a position for the block's text. The options are Left, Center, or Right. This option applies only on desktop display devices, and does not apply when the Width option is set to full. Select Remove block to delete the block from the current section.
Feature text	Displays an area with formatted heading text and links inside the section.	In the Subheading field, enter text to display as a subheading inside the block. In the Text field, enter text to display as body text inside the block. Format the text and add links using the inline editor. Adjust the Mobile font size scale slider to set a font size for the block's body text on mobile devices. The minimum value is -2, and the maximum is 4. Adjust the Desktop font size scale slider to set a font size for the block's body text on desktop devices. The minimum value is -2, and the maximum is 9. Use the Font options to set the block's body text to use the same font as Heading or Body text. Use the Text alignment options to align the block's text to Left, Center, or Right. Set the Add space above option to on or off. With this option enabled an area of empty or "whitespace" is displayed above the block. Use the Call to action > Link field to enter an external URL or to select a link to display inside the block. Adding a dedicated “Call to action” block will override this option. In the Call to action > Text field, enter text to display as a label for the block's link. Adding a dedicated “Call to action” block will override this option. Use the Call to action > Style options to apply a standard text Link or Button style for displaying links inside the block. Adding a dedicated “Call to action” block will override this option. Use the Call to action > Button style options to apply the Primary or Secondary button style to the block's button. To enable this option, set the Style option to Button. Adding a dedicated “Call to action” block will override this option. Use the Desktop layout > Width options to set a maximum width for the block's text area to Full, Two thirds, or Half. This option applies only on desktop display devices. Use the Desktop layout > Position options to specify a position for the block's text. The options are Left, Center, or Right. This option applies only on desktop display devices, and does not apply when the Width option is set to full. Select Remove block to delete the block from the current section.
Call to action	Displays a button that links to a store page.	Adjust the Mobile font size scale slider to set a font size for the block's button label text on mobile devices. The minimum value is -2, and the maximum is 4. Adjust the Desktop font size scale slider to set a font size for the block's button label text on desktop devices. The minimum value is -2, and the maximum is 9. Use the Font options to set the block's button label text to use the same font as Heading or Body text. Use the Text alignment options to align the block's button to Left, Center, or Right. Use the Call to action > Link field to enter an external URL or to select a link to display inside the block's button. In the Call to action > Text field, enter text to display as a label for the block's button. Use the Call to action > Style options to apply a standard text Link or Button style to the block's button. Use the Call to action > Button style options to apply the Primary or Secondary button style to the block's button. To enable this option, set the Style option to Button. Select Remove block to delete the block from the current section.
Countdown timer	Displays a countdown timer inside the section.	Set the Use current year option to on or off. With this option enabled, the block's countdown timer uses the current year. Alternatively, to set the block's countdown timer to use a specific year, set this option to off and then enter a year in the Year option field. In the Year field, enter a four-digit number that represents the year you want the block's countdown timer to display. For example, enter the year 1916. To use this option, disable the Use current year option. Use the Month option to select the month you want the block's countdown timer to display. For example, select 1 – January, 2 – February, 3 – March, 4 – April, 5 – May, etc. Use the Day option to select the date (day of the month) you want the block's countdown timer to display. Use the Hour (24-hour time) option to select the hour (in 24-hour format) you want the block's countdown timer to display. For example, select 00 (12 a.m. / midnight), 01 (1 a.m.), 02 (2 a.m.), etc. Use the Minute option to select the minute (in 24-hour format) you want the block's countdown timer to display. For example, select 00, 01, 02, etc. Use the Style option to apply a Numbers, Timer, or Grid style to the block's countdown timer. Use the Number padding option to select S (small), M (medium), L (large) or XL (extra large). This option specifies a size for the spacing that separates each block of numbers inside the countdown timer. Set the Flash separators option to on or off. With this option enabled, a "flashing" or "blinking" animation is applied to the text characters that separate parts of the block's countdown timer. To use this option, set the Style option to Timer. Use the Font options to set the block's text to use the same font as Heading or Body text. Use the Always show options to override the countdown timer's auto-hide behavior. By default, the block's countdown timer automatically hides text labels for expired days, months, and years. Use the Always show options to select which labels will not be hidden. For example, set the timer to always display expired Minutes, seconds, Hours, minutes, seconds, or Days, hours, minutes, seconds, etc. In the Date metafield > Metafield namespace and key field, enter a namespace and key value to display countdown timer text from a dynamic source. Refer to Shopify help: Metafields. This option overrides the block's date settings, and it is supported on Products, Collections, Blogs, Articles, and Pages. Select Remove block to delete the block from the current section.
Newsletter	Displays a newsletter sign-up form inside the section.	In the Text field, enter text to display inside the block. Use the Desktop form position > Horizontal options to specify a horizontal position for the newsletter inside the block. The options are Left, Center, or Right. This option applies only when the Text option field is empty, and only on desktop display devices. Use the Desktop form position > Vertical options to specify a vertical position for the newsletter inside the block. The options are Top, Center, or Bottom. This option applies only when the Text option field is empty, and only on desktop display devices. Select Remove block to delete the block from the current section.