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.

1. How to access a Text with image overlay section

You can access a Text with image overlay section by following these simple steps:

1. From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

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.

2. How to edit a Text with image overlay section

You can configure some general options for the Text with image overlay section below:

2.1. Text with image overlay

• 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).

2.2. Section padding

• 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.

2.3. Theme setting

• 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.

3. How to edit a Text with image block

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:

3.1. Text with image

• 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.

3.2. Content

• 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.

3.3. Button

• 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.

Updated on: 15/08/2025