Countdown banner settings

Setting Description
Color scheme

Select a color scheme from the list and customize it with appropriate colors for heading, text, countdown, and background.

Applying a color scheme to the countdown bar section automatically updates all associated colors set in the theme settings according to the created color schemes.

You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.

Heading

This field is for adding a heading to the section. The heading will be displayed on the left side of the countdown.

In the top menu of the field, you can find options to customize the heading.

Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.

Heading font family:
  • Heading
  • Body

In Theme Settings, you can assign a different font family to headings and body text. This allows you to customize the visual style of your heading in the Countdown banner section.

For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve.

Heading size

The heading size setting offers three options to control the size of your section heading:

  • Small
  • Medium
  • Large
Content color

This option provides additional customization of the content color within the section.

You can choose one of three available text color options, based on the color scheme applied to the section.

  • Text
  • Text secondary
  • Heading
Description

This field is for adding a description to the section. The description will be displayed after heading on the left side of the countdown.

In the top menu of the field, you can find options to customize the description.

Furthermore, you can click the dynamic source button to insert a dynamic source as the description.

Full width

Enable this option if you want the section to display at full width.

Leave it disabled to display the section with side paddings.

Section color scheme

Select a color scheme from the list and customize it with appropriate colors for the whole section background.

Applying a color scheme to the countdown bar section automatically updates all associated colors set in the theme settings according to the created color schemes.

You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.


Not full-width content padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the content container using a slider.
Bottom padding The 'Bottom padding' setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the content container. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the content container specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the content container for mobile devices.

Content background


Setting Description
Desktop background image

This option allows you to set an image as the background of the content container. Simply upload your desired image.

*See below for an example from the demo store.

Mobile background image

This option allows you to upload a separate image for mobile devices.

Upload an image with a more suitable ratio for mobile display for best results.

An example from the demo store


Countdown settings


Setting Description
End date Enter the end date for a specific promotion. Refer to the example provided below the field in the theme customizer to ensure the discount period's end date is correctly formatted.
When date has passed

When the specified date has passed, use a dropdown menu to choose how the countdown bar behaves:

  1. Show Zeroes: The countdown stops and displays 00:00:00    for all units (days, hours, minutes, seconds).
  2. Hide countdown: The countdown bar is hidden once the date has passed.
  3. Cycle: The countdown resets and starts over from the initial duration, creating a repeating cycle.
Days Keep the suggested label for days, or write your label in the field. 
Hours Keep the suggested label for hours, or write your label in the field. 
Minutes Keep the suggested label for minutes, or write your label in the field. 
Seconds Keep the suggested label for seconds, or write your label in the field. 

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us