Image with text overlay
The Image with text overlay section seamlessly combines images and content, effectively reaching users and enhancing the overall user experience.
Section settings
General settings
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
Image
Upload desired image to display on desktop
Mobile image
Upload desired image to display on mobile
Image overlay opacity
Adjust the visibility of the image
Image height
Customize the size of the image
Content settings
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.
Mobile layout
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
Section padding
Top
Customize the top margin of the section
Bottom
Customize the bottom margin of the section
Section divider
Show divider
Toggles the visibility of a horizontal divider line within the section.
Block settings
Heading, Subheading, Description
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
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
Highlight text
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
Last updated