.png){kind=logo}
Image with text overlay
The Image with text overlay section offers a stylish way to present content over background images or display the image by itself. You can easily upload high-quality images, overlay text to share your message, and include buttons that direct visitors to specific pages or products on your website.
How to add image with text overlay section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks that overlay the image within the section.
Section-Specific Settings
- Image on Desktop/Mobile: Upload images specific to desktop and mobile views.
- Overlay Opacity: Adjust the transparency of the image overlay.
- Image Height: Set image height (small, medium, large, full-screen, custom).
- Content Position: Position content on the image for both desktop and mobile views.
- Content Maximum Width: Control the width of the content on the overlay.
- Content Spacing: Adjust vertical and horizontal spacing for text.
- Content Background: Add and customize a background color for the text block, including its opacity.
Block Settings
- Subheading Block: Add and style a subheading (size options: small, medium, large).
- Heading Block: Set the main heading and adjust its size (small to extra-large).
- Text Block: Add rich text to describe the content or product and optionally enlarge the text.
- Buttons Block: Add main and optional buttons with customizable labels, links, and styles.
