Image with countdown
Last updated
Last updated
Customize Theme → Sections → Template → Image with countdown
The Image with Countdown section of a Shopify store offers a compelling means to instill a sense of urgency and prompt action among visitors. By blending captivating imagery with a countdown timer, merchants can effectively promote limited-time offers, flash sales, or upcoming events, encouraging immediate engagement. In this section, we'll explore the various settings and customization options available for the Image with Countdown section, empowering merchants to create impactful displays that motivate visitors to engage with promotions and boost conversions.
The Settings Overview offers a comprehensive examination of all customization options available within the 'Image with countdown' section, providing merchants with the tools to craft visually compelling displays that effectively harness the power of urgency to drive engagement and sales.
Layout: One of two options is to be selected.
Fluid: Option that makes the image a background, so the text and button appear in front.
Columns: Option that divides the section into two parts: one for the image and the other for the text.
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Swap columns: With that setting, the user can swap the image and the text positions. If unchecked, the image is on the left, and accordingly, the text is on the right. It would take effect if ONLY the Columns Layout option is selected.
Image width: Setting that gives the user control over what percentage of the section the image occupies. It would take effect ONLY on the desktop version. It can vary from 30% to 70%.
Image position on mobile: On the mobile version when the Columns Layout option is selected, the image and the text are positioned one above the other. Thus, the image position is to be selected. There are two options: Top and Bottom.
Media ratio on desktop: Gives control over the media ratio for the desktop version.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Image on desktop: Select an image for the desktop version.
Image on mobile: Select an image for the mobile version.
Color scheme: With that setting, the user can choose the color scheme of the 'Image with countdown' section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Caption: Enter a caption for the section.
Heading: Enter a heading for the section.
Description: Enter a description for the section.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Expiration date: A setting responsible for the date by which the offer is limited. The countdown automatically calculates the days, hours, minutes, and seconds remaining until the expiration date. The format is as follows: YYYY-MM-DD HH:MM, respectively, for the year, month, day, hour, and minute. The year, month, and day are mandatory, the hours and minutes are optional. The format for the hours is 24-hour notation.
Button label: Enter a label for the button.
Button link: With that setting, the user can choose one of the store links or enter an external link for the button.
Use outline button style: An additional setting to control the button presentation. The button becomes transparent, and a border in label color appears.
Image overlay color: With that setting, the user can overlay the image with a color or colors, giving the image an additional effect using the gradients. Via the control panel, the user can control the gradients with an input method or manually, as shown on the illustration below.
