Image with text overlay
The "Image with text overlay" section is a good way to display a full-width banner completed with the text over an image and call-to-action buttons that link to other pages.
Tip: This section includes four blocks: "Heading", "Text and Custom HTML", "Buttons" and "Mobile settings". Each block can be added individually and customized in different ways.
Image
Press "Select image" to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height respectively). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Tip: The "Image" settings described below will only apply to the desktop mode.
Activate the "Show image overlay" in the "Mobile settings" block to allow the use of settings for mobile viewing.
The video can be placed by simply pressing the "Select video" button in the "Video" source selector. By selecting this feature, the Shopify-hosted video will appear within the section. You can either upload the video to your Store library or utilize one that has already been stored in your admin.
Use the "Autoplay" function to initiate the video display automatically upon a visitor landing on a page without pressing the play button. The video will continuously loop in this mode.
If you need to change the "Image overlay background", select the color from the color picker. By default, the color is set to transparent. The option works with the enabled "Add overlay opacity", "Zoom in, add overlay opacity", or "Zoom out, add overlay opacity" in the "Animation" subsection.
Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option here.
Adjust the transparency of an image gradient overlay using the "Image overlay opacity" scale from 0 to 100%.
Text
Tip: Add the dynamic "Mobile settings" block to change the text position and text alignment settings for mobile. Read details here.
The option "Desktop text position" helps to place texts in different positions: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option that best fits your needs in the drop-down.
If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Desktop text alignment" drop-down.
In the "Text box desktop background", you can set the color from the color picker. By default, the color is set to transparent.
Use the "Text box desktop opacity" scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.
The "Text box desktop width" scale allows setting the text width from 30% to 100%.
In the following example, you can view how the described settings might display in a banner with the next text parameters:
You can read more about the described options on the following help page.
Layout
The "Height" can be changed to "Adapt to image", "Fullscreen", "Fullscreen without header" or "Fixed". When using the "Fullscreen without header" option, the image will be cropped at the top and bottom, so check the following settings on the storefront to ensure they meet your needs.
If you choose the "Fixed" option, use the "Fixed height" scale to control the image height from 100 to 1000 pixels.
Use the "Width" drop-down to apply one of the options: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed". Once the last option is selected, you can manually change the width from 450 to 2000 pixels using a "Fixed width" setting. The margins will be set to the left and right when using "Fixed".
Here is how the "Wide" option appears in the section:
To read more about the described options, view the following help page.
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animation
Desktop hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image desktop hover animation" drop-down. Read the details on the following help page.
The options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" (read the details above). To use this option, make sure that the "Image overlay opacity" is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.
You can read more about the described options on the following help page.
Here is the example view of the section on a desktop and mobile:
Last updated
