Image with Text Overlay Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using Image with Text Overlay
The eComm Performance theme features an 'Image with Text Overlay' section that gives you the ability to add homepage banners! This section is generally seen at the top of a homepage and is accompanied by images that will catch the viewer's attention.
In this section, you can add text, buttons, or both on top of the images. Avoid using cluttered images! You can choose to adjust the text's position and alignment, which is why selecting an image that is not cluttered would help position the text.
You can also configure mobile-specific settings for the section, which includes image cropping and text position. This is so your images will look right to your customers!
To set up the Image with Text Overlay, go into Customize (your Theme Editor) > Sections > Add Section > Image with Text Overlay.
Image with Text Overlay Settings
Section Settings
The section settings help you decide how you want the section to look and its layout!
Wide Display
You can enable 'wide display' so the section will be spread out the screen's entire width. If this is not enabled, the section will be in a 'container' on the homepage and not spread out the entire width of the screen:
Preheading/Heading/Subheading
After you've selected an image, you can enter text in three separate areas: the 'preheading,' 'heading,' and 'subheading' fields. 'Preheading' is displayed above the 'heading,' and the 'subheading' shows below. The 'preheading' and 'subheading' have a smaller font size than the main 'heading.'
Display solid text background/Enable background transparency
To allow your images to stand out more, you can use two different features; the 'display solid background' and 'enable background transparency' settings. These settings add a darker background behind your text, which is helpful if you want more legibility.
Text Position
This section allows you to decide on the position of your text and any added buttons. You can select from the left, center, or right:
Text Alignment
The text alignment of your text and any buttons that you've added can be decided here. You can select from the left, center, or right:
Button labels/Button links
There are two buttons that you can select for the 'image with text overlay' section! 'First button label' and 'Second button label' are where you can enter the text that you want to appear on the buttons. 'First button link' and 'Second button link' are where you decide on the links that you want for the buttons.
You also can choose to select the 'Highlight first button' and 'Highlight second button' settings. This will display your buttons as 'filled in' and not the outline design.
Demo Shop Example
This is how our 'Image with Text Overlay' homepage section is set up in our demo shops for eComm Performance!
Section Settings
- Wide display: Enabled.
- Preheading: Enabled.
- Heading: Added.
- Text: Added.
- Text position: Left.
- Text alignment: Center.
- First button label: Added.
- First button link: Added.
Mobile Layout
When the Image with Text Overlay section is viewed on a mobile device, it can either be stacked vertically with the banner image on the top and the text and buttons displayed underneath or with the text and button displayed on top of the image. This depends on your 'mobile settings.'
The separate 'mobile' settings will allow you to crop your image, choose the text position, and you can also choose specific colors for the text if you want to.
Image Cropping
This mobile section's default setting is to display the entire banner image without cropping or zooming in on it. This will typically result in a narrow banner. If you want to have a better display area on mobile devices, you can enable 'image cropping.' This will both crop and zoom in on the image (left, center, right).
Show Text Below Image
The default setting is to have the text and buttons displayed below the banner image on mobile. If you want to have the text displayed on top of the banner image, you can disable the 'show text below image.'
Text Color
One feature of the mobile settings is to choose a specific color for the text on a mobile device:
Related Articles
Rich Text and Image Section on the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using Rich Text and Image The eComm Performance theme includes a 'Rich Text and Image' section that allows you to add a content block to your ...Featured Products Section - eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Featured Products Section The eComm Performance theme has a 'Featured Products' section which is an easy way to showcase products and ...Using the Video Section in eComm Performance
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. How to Use the Video Section The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance ...Gallery Section in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Gallery Section The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to ...Header Settings in the eComm Performance Theme
Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Setting up the Header The eComm Performance theme has a customizable 'Header' section. The Header has some built-in settings, including ...