How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Countdown
A countdown provides a sense of a rimeframe for users to return to your store for the start of an event like a sale or an announcement
In this section...
Options
Month
Pick your ending month
Day
Pick your ending numerical day. 1 is the minimum, and it steps up by 1 to a maximum of 31
Year
Pick your ending numerical day. 2024 is the minimum, and it steps up by 1 to a maximum of 2124
Hour
Pick your ending numerical hour. 1 is the minimum, and it steps up by 1 to a maximum of 12
Minute
Pick your ending numerical minute. 0 is the minimum, and it steps up by 1 to a maximum of 59
Second
Pick your ending numerical second. 0 is the minimum, and it steps up by 1 to a maximum of 59
AM/PM
Choose to end in the morning (AM) or in the evening (PM)
During countdown text
This is the text that is displayed while the time is counting down
Heading
Title of the section or page, either default or custom
Use h1 tag
For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Subheading
Secondary title of the section or feature
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Text
A text block for basic formatting including bold, italic & linked text
Link
Include a button with a link
Button
Customize the text for the button
Outline button
Invert the button to use a frame with no background
After countdown text
This is the text that is display after the time is done counting down
Heading
Title of the section or page, either default or custom
Heading size
Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Subheading
Secondary title of the section or feature
Subheading size
Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px
Text
A text block for basic formatting including bold, italic & linked text
Link
Include a button with a link
Button
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Banner
Text color
Choose a custom color for the text
Text hover color
Choose a custom color for links when hovered over
Button text color
Choose a custom color for the default button text and the outlined button hover text
Text alignment
Text can be aligned to the left, right or centered to the container
Content width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:
Setting
Desktop Width
Mobile Width
33%
380px
100%
50%
580px
100%
66%
780px
100%
75%
800px
100%
Horizontal position
After setting the content width, content can be aligned to the left, right or centered
Vertical position
After setting the content width, content can be aligned to the top, bottom or middle
Desktop/Mobile Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
Setting
Desktop Width
Minimum Desktop/Mobile Width
Full width checked
100%
1900px/600px
Full width unchecked
1180px
1180px/600px
The height will determine the overall width of the background image. The following would be used to determine the actual necessary width of an image:
Screen Width x Height x Image Ratio = Desired Width
Height
The overall height of the banner in relation to the height of the screen. 0-5% is the minimum, and it steps up by 5 to a maximum of 100%.
Some sections may have Desktop & Mobile options:
- Desktop: Used on screens larger than 768px
- Mobile: Used on screens smaller than 768px
Overlay color
A color may be applied to background images to help the text clarity
Overlay gradient
A gradient may be applied to background images to help the text clarity
Overlay opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Section
Lazy load images *
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Background color
Choose a custom color for the background
Background gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* May not be available in all Sections