Image with text overlay

Section width

3 options for container
• Stretch width: span the section width regardless of screen size.
• Fix width: depends on your page content width in Theme settings -> Layout.
• Full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.

Color scheme

Select colors from Theme settings -> Colors

Image

Upload desired image to display on desktop (1392px x 500px recommended)

Mobile image

Upload desired image to display on mobile (400px x 469px recommended)

Image overlay opacity

Adjust the visibility of the image

Image height

Customize the size of the image

Desktop content position

Adjust the content position on desktop

Content alignment

3 options for the content alignment
• Left
• Center
• Right

Max width

Controls the maximum horizontal space.

Padding inline

Controls the horizontal spacing (left and right) inside the content block.

Padding block

Controls the vertical spacing (top and bottom) inside the content block.

Show text below on mobile

Move the text content below the image on mobile devices.

Content alignment

3 options for the content alignment
• Left
• Center
• Right

Top

Customize the top margin of the section

Bottom

Customize the bottom margin of the section

Show divider

Toggles the visibility of a horizontal divider line within the section.

Heading, Subheading, Description

Custom title block

Width

2 options for content's width:
• Fit
• Fill

Typography - Preset

This element inherits the font preset defined in the theme settings, ensuring consistent typography across the storefront.

Background

Toggle this setting to make the background options visible and configurable for this section.

Background color

Defines the background color for this section.

Corner radius

Adjust this value to create sharp or rounded edges, enhancing the visual style of the component.

Padding top/bottom

Adjust these values to control the amount of space between the section’s content and its outer edges.

Button label

Custom name button, if left empty, the button will be hidden

Button link

The link URL you want to add

Button type

The style of the button
• Primary
• Outline
• Link

Spacing bottom

Spacing between the button and the next component

Subheading

Custom title block

Size

The size of highlighted content

Select icon

Choose the icon to show along with the highlighted content

Background color

Setting the background color

Text color

Setting the content color

Uppercase

Uppercasing the highlighted content

Spacing bottom

Spacing between the highlighted content and the next component

End time

Set the end date for the timer

Expired message

Define the message appear when the timer runs out

Design

Select your preferred design for the timer here:
• Default
• Modern

Spacing bottom

Spacing between the highlighted content and the next component

Text

The main content to show in circular

Uppercase

Change the text style to Uppercase

Svg icon

Select an icon to display in the middle

Direction

Select a direction for the text to spin

Speed

The time to complete a spin

Spacing bottom

Spacing between the highlighted content and the next component