Image with text overlay
The "Image with text overlay" section is a great way to display a video or full-width banner, complete with text overlay and call-to-action buttons that link to other pages.
Tip: This section includes three blocks: "Heading", "Text and Custom HTML", and "Buttons". Each block can be added individually and customized in different ways.
Note! The current section includes additional Before/After functionality that can be activated by adding the "Second image" block.
Section link
Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Media
In the "Type" drop-down, determine the media format. It can be changed to "Image", "Video", or "YouTube or Vimeo URL". Additional settings related to each option will be displayed after an option is selected.
"Image". Choose the option and link an image by pressing the "Select" button to display a simple image banner.
The following section provides two methods of displaying a video on a page. Select the one that fits you well:
"Video". Embed a video file apploaded to your Shopify admin -> Content -> Files by selecting the option and pressing the "Select" button in the "Video" source selector.
"YouTube or Vimeo URL". Select the option to display a video from a URL. The video can be placed by simply pasting a link into the "Video URL" field.
Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:
"Adapt to media". Displays an image/video in its original aspect ratio.
Note! This option is automatically applied when the "Image parallax" feature is activated to generate the parallax effect.
"Fixed in px". This option adapts an image/video size in pixels by setting the parameters on the "Height" scale. The height can be adjusted between 100 and 1000 pixels.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
*The "Proportion in height" option is applied to mobile by default. To modify the height specifically for mobile, use the "Mobile settings".
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fullscreen". Set this option to show media in the full width of a page. The image/video width will match the page width set in global settings if the "Enable page width" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
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".
* The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in Theme settings -> Page layout.
Here is how the "Wide" option appears in the section with the disabled page width in the global settings:
Video settings
Note! The "Cover image" and "Alt text" settings will be displayed after selecting the "YouTube or Vimeo URL" video type.
Press the "Select" button in the "Cover image" source selector to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
In the "Alt text", paste the descriptive text for screen readers. Read more details in the initial documentation.
Use the "Autoplay" function to start a video display automatically upon a visitor landing on a page without pressing the play button.
Activate the "Loop" option to play your video repeatedly and continuously.
To display the video's Parental Controls, tick the "Controls" option.
Note! Ensure the image link field is empty in order to use the video controls. Otherwise, visitors will be redirected to another page when pressing the video player controls.
Media overlay
Turn on the "Enable" option to display the related settings.
Tip: The "Image" settings described below will only apply to the desktop mode.
Activate the "Show media overlay" in the "Mobile settings" to apply settings for mobile viewing.
Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.
In the "Type" picker, select one of the options: "Background" or "Gradient".
If you need to change the "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. The applied option won't work if you use the gradient color.
Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Content box
Tip: The text position and text alignment settings can be applied specifically for mobile in the "Mobile settings". Read details here.
The "Position" option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs. The "Auto" option sets the pre-designed parameters of the theme style.
If you need to align the text for the desktop to "Left", "Center", or "Right", select one of the options in the "Alignment" picker.
The "Width" scale allows you to adjust the width of the text box, changing the parameters from 30% to 100%.
Activate the "Enable background" option to view additional background settings.
Use the "Opacity" scale to change the text box background transparency from 0 to 100 %, where 0% is an invisible background and 100% is opaque.
In the "Background", specify the color from the color picker. By default, the color is set to transparent.
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.
Section layout
Read more regarding the described options on the following help page.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.
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
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 "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" (read the details above). To use this option, ensure that the "Opacity" is set to transparent. The overlay opacity and zooming effect on an image can be achieved by selecting the "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.
Image parallax
Activate one of the options from the drop-down list to add an effect that moves images within the container as you scroll up or down a page. The available options are: "Move up", "Move up with delay", "Move down", "Move down delay", and "Static". To disable the parallax effect, choose the "Disable" option.
* The parallax settings need to be rechecked with the altitude settings described above.
Mobile settings
Using the "Enable" option, you can apply changes to the mobile mode regardless of the desktop settings. Activate the option to view additional functionality.
The "Text position" can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list.
Upload the necessary image for both desktop and mobile in the "Cover image" source selector. The image can be used as a banner or a cover image for a video. The recommended image ratio is two-to-one (width-to-height).
The "Media height" of an image on mobile can be changed by operating one of the options. Additional settings related to the option can be displayed after selecting a required feature.
"Same as on desktop". Select the option to apply the same settings as on the desktop set in the main section.
"Adapt to image". Displays the image in its original aspect ratio.
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
"Proportion of height". Select the option to adjust the image height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* For an ideal video aspect ratio (16:9), set the proportion to 56%.
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
"Fullscreen". Set this option to show media in the full width of a page.
"Fullscreen without header". Using this option, media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
Check the "Show media overlay" option to display the color overlay of the image. This option works with the configured settings of the image overlay in the section. Find more details here.
The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.
If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Text alignment" drop-down. To clarify the use of parameters, check the following help page.
Second image
To show the Before/After functionality for the banner, simply activate the "Enable" option and apply the desired configurations. The related settings for customizing the second image will be shown underneath after the option is enabled.
In the "Image" picker, set a second image by selecting it from the Theme Library or uploading it from your device.
Note! The Before/After functionality will automatically switch to a simple banner on mobile view if you set a specific image in the "Mobile settings".
Use the "Make as Before/After" drop-down to change the layout of the slider:
"Disable". Two images will be placed next to each other without a dividing line by selecting the current option.
"Horizontal". Set the horizontal dividing line by choosing this option, displaying the images side by side.
"Vertical". Use the provided option to display the vertical dividing line, separating images and positioning them at the top and bottom.
The "Enable pulse animation on mobile" will be shown after applying the "Horizontal" or "Vertical" options from the drop-down above. Activate the option to add a round, semi-transparent pulse animation effect in the bottom-right corner of the image on mobile. This prompts viewers to tap or click the image, moving the slider's arrow to reveal changes.
Ticker
Note! Use the ticker to overlay the image on the desktop view. It will be disabled on mobile by default.
To add a ticker overlayed on the image, hit the "Show ticker" checkbox. Additionally, this option activates other settings related to this feature.
In the "Text" input field, add any promotion or proposition strings.
The "Position" picker includes options to arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.
Using the "Speed" slider, you can adjust the running line speed in seconds from 1 to 5.
The ticker background color can be set as solid or transparent in the "Background opacity" scale. The parameters vary from 0 to 100 pixels.
Use the "Background" and "Text" color pickers to colorize the ticker accordingly.
Here is the example view of the section on a desktop and mobile:
Last updated