The Text with image overlay section is a powerful way to highlight key messages or promotions by combining eye-catching visuals with compelling text. This section allows you to place text directly over an image background, creating a bold and engaging presentation.
In this section, you'll learn how to customize the Text with image overlay section to match your campaign.
You can access a Text with image overlay section by following these simple steps:
Step 1: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 2: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Text with image overlay.
You can configure some general options for the Text with image overlay section below:
Desktop image position: Choose where the image appears on desktop screens:
Left: Image appears on the left side.
Right: Image appears on the right side.
Auto-rotate blocks: When enabled, the blocks will change automatically after a set time interval.
Change blocks every: Set how frequently the blocks rotate when auto-rotation is enabled (in seconds).
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
Horizontal space: Controls the spacing between blocks or columns.
Page width: Sets the maximum width of the section (e.g., 1440px) — useful for full-width or fixed-width designs.
To add Text with image block, click the Add Text with image button (plus icon ➕) under the Text with image overlay section
Let's explore the customization options for Text with image block below:
Color scheme: Allows you to select a color palette for this section. The selected scheme will affect the background color, text color, and button styling.
Image: This is the main image displayed in the “Text with image” section on desktop view. You can choose from the media library or upload your own custom image.
Mobile image: This is the image specifically used for mobile devices. If you don’t select a mobile image, the desktop image will be used by default on mobile.
Caption: Enter a short tagline or phrase that appears above the main heading.
Heading: This box is where you input the main headline. You can format the text using bold, italic, link...
Heading size: Sets the size of the heading, options included: Extra extra large, Extra large, Large, Medium, Small, Extra small, Extra extra small.
Heading style: Choose the text transformation:
Normal: Regular text style.
Uppercase: Converts all heading letters to capital letters for a more impactful look.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Description: A longer text area for adding more detailed content below the heading. Supports basic rich text formatting: font styling, links, bullet points, etc.
Label: This is the text that will appear on the button. If left blank, the button will be hidden — useful if you don’t want a button displayed for that section.
Link: The URL or page path where the button should direct users when clicked. You can paste an external link or search for an internal page/product in your store.
