The Text bottom over media section lets you display text, countdowns, buttons, and other content over an image or video. It is useful for promotional banners, campaign highlights, product launches, and other visual content where you want the message and call-to-action to appear directly on the media.
Use the general section settings to control the section width, colors, and mobile layout.
Section width: Choose how wide the section is displayed on the page. For example, Boxed keeps the section within the page container.
Color scheme: Select the color scheme used for the section content.
Stack content below media on mobile: Display the content below the image or video instead of overlaying it on the media on mobile devices.
Use the Media settings to configure the image or video displayed as the section background.
Media type: Choose between Image and Video.
Video height: Select the video aspect ratio or height on desktop.
Mobile video height: Select the video aspect ratio or height on mobile.
Video source: Choose the source of the video, such as a Shopify-hosted video.
Video: Select the video to display.
Show button video control: Show video controls that allow customers to control video playback.
Cover image: Select an image to use as the video cover.
Video behavior: Choose how the video behaves while customers interact with the page. For example, Zoom out on scroll gradually zooms the video out as the page is scrolled.
Note: The Zoom out on scroll behavior only works with the Full section width layout.
Media overlay opacity: Adjust the opacity of the overlay placed over the media. Increasing the opacity can help improve the readability of text displayed over bright or detailed media.
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Space above the section on desktop.
Bottom padding: Space below the section on desktop.
Mobile top padding: Space above the section on mobile.
Mobile bottom padding: Space below the section on mobile.
The Content block controls the content displayed over the media. Click Add block inside the Content block to add and arrange content over the media. In the example shown, the content includes:
Countdown timer: Display a countdown for a promotion, launch, or other time-sensitive event.
Heading: Add the main message displayed over the media.
Text: Add supporting text or a short description below the heading.
You can drag and reorder these blocks to control the order in which the content appears.
Content maximum width: Set the maximum width of the content area.
Note: If Stack content below media on mobile is enabled, the Max-width setting in this Content block is ignored on mobile.
Use the Button right settings to add a call-to-action button on the right side of the content area.
Label: Enter the button text, such as Explore now.
Link: Select or enter the destination customers are taken to when they click the button.
Size: Select the button size: Small, Medium, or Large.
Style: Choose the button appearance: Outline, Solid, or Link.
Show icon: Show or hide an icon in the button.
Icon button: Select the icon displayed with the button.
Uppercase: Display the button label in uppercase.