The Countdown Condensed section displays a compact countdown banner for limited-time offers, launches, flash sales, or store-wide announcements.
Unlike the full Countdown Timer section, this section is designed to be more compact and is available in the Header group. It can show a short text message and a countdown timer side by side.
How to Set Up the Countdown Condensed Section in Concept
Steps:
Add the Countdown Condensed section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
In the theme editor sidebar, open the Header group.
-
Click Add section.
-
Select Countdown Timer.
-
Configure the section settings and blocks.
-
Click Save.
The section file is named countdown-condensed.liquid, but the section name can appear as Countdown Timer in the theme editor.
Configure the section layout
-
Open the Countdown Timer section in the Header group.
-
Use Text color to set the color for the countdown and message.
-
Use Background or Background gradient to style the banner background.
-
Use Highlight or Highlight gradient if your text block uses highlighted text.
-
Adjust Top padding and Bottom padding to control the banner height.
-
Enable Make section full width if you want the banner to span the full browser width.
-
Enable Make section rounded if you want rounded section corners.
-
Click Save.
The section uses a condensed layout and supports up to two blocks. It is commonly used with one Text block and one Timer block.
Add a Text block
-
Open the Countdown Timer section.
-
Add or select a Text block.
-
Enter the announcement text in the Text field.
-
Choose the Text font style.
-
Adjust the Desktop content alignment.
-
Use the Highlighted text settings if you want part of the message to appear with a special highlight style.
-
If you choose Hand-drawn scribble, select the Highlighted scribble style.
-
Click Save.
The Text block is useful for short promotional messages, such as a sale notice, launch message, or campaign headline.
Add a Timer block
-
Open the Countdown Timer section.
-
Add or select the Timer block.
-
Set the countdown end date using Year, Month, and Day.
-
Set the countdown end time using Hour and Minute.
-
Choose the Text font style.
-
Adjust the Desktop content alignment.
-
Add a Timer complete message if needed.
-
Enable Use compact style if you want the timer to display in a shorter format.
-
Click Save.
Only one Timer block can be added to this section.
Use compact style
-
Enable Use compact style when you want the timer to take less space.
-
In compact style, the timer uses short labels such as days, hours, minutes, and seconds in a condensed format.
-
If compact style is disabled, the timer uses a fuller label layout on desktop.
-
On smaller screens, the timer can still switch to a compact mobile-friendly display.
-
Click Save.
Compact style is useful when the countdown is placed in the header area or when the banner needs to stay short.
Preview the countdown banner
-
Open the storefront preview from the theme editor.
-
Check the banner on desktop.
-
Check the banner on mobile.
-
Make sure the text and timer are easy to read.
-
Confirm that the countdown date and time are correct.
-
Click Save when the banner looks correct.
If the section has both a Text block and a Timer block, they can appear side by side on larger screens and stack more compactly on smaller screens.
Countdown Condensed behavior
- The section is available in the Header group.
- The section supports up to 2 blocks.
- The common setup is one Text block and one Timer block.
- The Timer block is limited to one block.
- If only one block is added, the content is centered.
- If two blocks are added, each block uses part of the row layout.
- The countdown updates automatically on the storefront.
- When the countdown date has passed, the timer itself is hidden.
- The Text block only appears when text content is added.
- Highlighted text styles use the section highlight color or gradient.
Troubleshooting
If the section does not appear, make sure you are adding it inside the Header group.
If the countdown does not show, make sure the Timer block has been added.
If the timer immediately disappears, check that the selected date and time are in the future.
If the text does not show, make sure the Text block has content.
If the section looks too tall, reduce the Top padding and Bottom padding.
If the section does not span the full width, enable Make section full width.
If the highlight style does not appear, make sure Highlighted text is enabled in the Text block and the text contains content that can be highlighted.
If the layout looks crowded on mobile, use shorter text or enable Use compact style in the Timer block.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Contact with Map Section in Concept
How to Set Up the Custom Section in Concept