Image with text with countdown

What is the Image with text with countdown section?

The Image with Text with Countdown section displays an image alongside text and includes a countdown timer, ideal for highlighting product launches, promotions, or limited-time events.

Main settings

Heading

• Heading: Set the title for the image with text section to introduce the content.
• Use rich text field for heading: Enable a rich text heading to choose the heading level (H1–H6) for SEO purposes and connect dynamic sources if needed.

Desktop Layout

• Desktop layout: Choose the layout for desktop devices (options: Image first, Text first).
• Desktop percentage image width: Adjust the percentage width of the image on desktop devices.
• Make section full width: Enable this setting to make the section span the entire width of the container.

Section Height

Height

• Height: Choose between adapting the height to the image or setting a fixed height.
• Desktop fixed height: Adjust the fixed height for desktop view.
• Mobile fixed height: Adjust the fixed height for mobile view.

Colors

• Heading color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Section background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the background color.
• Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Text container color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the text container background color.

Large Screen Version

Image

• Image: Select an image for the large screen version of the section.

Large Screen Text Alignment

• Large screen text alignment: Choose the alignment of the text on the section for large screens (options: Top, Center, Bottom, Left, Center, Right).

Mobile Version

Image

• Image: Select an image for the mobile version of the section.

Mobile Screen Text Alignment

• Mobile screen text alignment: Choose the alignment of the text on the section for mobile screens (options: Left, Center, Right).

Section Spacing

• Distance from the top: Adjust the spacing from the top of the section.
• Distance from the bottom: Adjust the spacing from the bottom of the section. ​

Customize heading block

Click one of the preloaded heading block to customize it.

Customize text block

Click one of the preloaded text block to customize it.

Customize button block

Click one of the preloaded button block to customize it.

Customize table block

Click on the table block to customize it.

Table block lets you add a simple two-column table using a multiline text input.

How to set up the table:

• In the multiline metafield field or directly in the theme editor, start writing your table.
• The first line is the header for the left column.
• The next line(s) are the content for the right column, which can span multiple lines.
• Separate each table row with one empty line.

Customize Icon with text block

Icon with text block allows you to display an icon next to text, making it perfect for creating custom bullet points or highlighting key information.

Customize Countdown timer block

The Countdown Timer block is a dynamic feature designed to create urgency and encourage customer action by displaying a countdown to a specific date and time. This block is perfect for highlighting limited-time offers, upcoming events, or product launches. It helps drive engagement and motivates customers to act before the timer expires.

Customize Spacer block

Spacer block lets you add spacing between blocks, allowing for a more flexible and visually balanced layout.

‍

Mobile view example