Image with overlay
The Image with overlay section allows you to create visually engaging content blocks by placing text and buttons over a background image or video. This section is perfect for highlighting promotions, announcements, or any content that benefits from strong visual emphasis.
This is a preset section — it can be added, removed, and reordered on any page.
How to Configure the Image with Overlay
In Shopify admin, go to Online Store → Themes.
Click Customize next to the Elemento theme.
In the theme editor, navigate to the desired page template (e.g., Home page) using the top preview dropdown.
In the left sidebar, click Add section, then select Image with Overlay, or locate it if it’s already added.
Upload the image and customize the overlay settings — adjust overlay color, opacity, text content (heading, subheading), buttons, and their styles.
You can drag and drop this section to reorder it on the page.
Click Save.
Section Settings
Setting
Type
Description
Mobile image
Image picker
An optional mobile-optimized image override.
Image
Image picker
Background image for the section.
Media height
Select
Height of the media container: Adapt to image, Small, Medium, Large.
Enable section background corner radius
Checkbox
Adds rounded corners to the section background image or video.
Show Shopify-hosted video
Checkbox
Toggle to show video hosted on Shopify instead of a static image.
A Shopify-hosted video
Video picker
The video to display (must be uploaded to Shopify Files).
Backdrop opacity
Range
Controls the darkness of the overlay behind the text.
Color scheme
Color scheme
Defines the overall color styling for the section.
Overlay Settings
Setting
Type
Description
Enable background
Checkbox
Enables a background box behind the overlay content.
Maximum width
Range
Controls the maximum width of the overlay content container.
Corner radius
Range
Sets the border radius (rounded corners) of the overlay background.
Vertical position
Select
Align overlay content vertically: Top, Middle, or Bottom.
Horizontal position
Select
Align overlay content horizontally: Left, Middle, or Right.
Blocks
The section supports up to three types of content blocks: Heading, Paragraph, and Button, which can be reordered to control the visual hierarchy.
Block: Heading
Setting
Type
Description
Text
Text
The main heading text over the image/video.
Block: Paragraph
Setting
Type
Description
Content
Rich text
A paragraph of supporting or descriptive text.
Block: Button
Setting
Type
Description
Label
Text
Button text. Leave blank to hide the button.
Link
URL
URL or internal link for the button.