The Media with text overlay section is a great way to grab your customers' attention right away. Combining a striking image or video with bold text, you can convey your key message, showcase a featured product or tell your brand story in a powerful, visual way. It's an ideal tool for making a great first impression and leading customers to explore further.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Media with text overlay
Clicking on the Image block title under Media with text overlay section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Visible if certain conditions are met
Image height: Choose how the image height is displayed (Adapt to image, fill the screen height, fixed height).
Fixed height: Enter the fixed height value for the image (if you choose "Fixed height").
Mobile image height: Choose how the image height is displayed on mobile devices (Adapt to image, fill the screen height, fixed height).
Mobile fixed height: Enter the fixed height value for the image on mobile devices (if you choose "Mobile fixed height").
Image: Upload the main image for the section.
Mobile image: Upload a separate image optimized for mobile devices (If none is set, desktop image will be used)
Image behavior: Choose the motion effect for the image when the user interacts (None, Ambient movement, Parallax)
Image overlay opacity: Adjust the opacity of the color overlay on the image, creating a darkening or highlighting effect for the overlaid text.
Clicking on the Image block title under Media with text overlay section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Visible if certain conditions are met
Video muted to can autoplay
Video height: Choose how the video height is displayed (Landscape wide (16:9), fill the screen height, fixed height).
Fixed height: Enter the fixed height value for the video (if you choose "Fixed height").
Mobile video height: Choose how the video height is displayed on mobile devices (Landscape wide (16:9), fill the screen height, fixed height).
Mobile fixed height: Enter the fixed height value for the video on mobile devices (if you choose "Mobile fixed height").
Video: Upload the main video for the section.
Shows when no Shopify-hosted video is selected. Using external video negatively impacts the performance of your site.
URL (Use a YouTube or Vimeo URL): Enter the URL of the video from YouTube or Vimeo to embed on the webpage.
Cover image: Upload a cover image for the video, recommended size 3200 x 1600px in .jpg format. The image might have a slight crop on one of the edges.
Video alt text: Enter alternative text describing the video for customers using screen readers.
Video overlay opacity: Adjust the opacity of the color overlay on the video, creating a darkening or highlighting effect for the overlaid text.
To add Content block to the Media with text overlay, click the Add item button (plus icon ➕) under the Media with text overlay.
Once the Content block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Hide background color on content: Hide the background color of the content container, allowing the content to blend with the section's overall background.
Desktop content position: Select the display position of the content on desktop screens (e.g., top left, top right, top center, middle left, bottom left,...), customizing the content layout.
Mobile content position: Select the display position of the content on mobile phone screens (e.g., top left, top right, top center, middle left, bottom left,...), optimizing the viewing experience on smaller devices.
Content maximum width: Set the maximum width for the content container, controlling the text line length to improve readability.
To add Heading block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Sub heading block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Text block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.
To add Caption block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users.
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Spacer block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Space: Setting space between elements creates clear separation.
Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens
To add Icon block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field
To add Email signup block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Email signup block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Each email subscription creates a customer account.
To add Button Group block to the Content block, click the Add item button (plus icon ➕) under the Content.
Once the Button Group block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Stack buttons is a user interface (UI) design technique that allows you to display multiple action buttons in a neat and organized manner.
To add Button block to the Button Group block, click the Add item button (plus icon ➕) under the Button Group
Once the Button block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Label: Enter the text displayed on the button, providing clear information about the button's action.
Link: Enter the URL linked when a user clicks the button, defining the destination of the action.
Open this link in a new window: Opens the link in a new browser window, keeping the user's current website open.
Button size: Select the display size of the button (small, medium, large), adjusting the button size to fit the layout.
Button style: Select the display style of the button (outline, solid, link), customizing the button's appearance to match the website design.
Uppercase: Converts the button label text to uppercase, creating emphasis and highlighting the button.
Minumum width: Defines the minimum width of the button (0 for auto). Does not apply to link style. Minimum width is automatically optimized for mobile.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Media type: select the media type (Image or Video) that matches the type you want to display.
Mobile layout
Stack content below media: With this option enabled, the text content will be displayed directly below the image or video, instead of overlaying it.
Animations
Reveal on scroll (Show animation when section becomes visible): Enable animations for the content section when it becomes visible while scrolling, enhancing interactivity and attracting attention.
Content visible animation: Choose an effect for the content when this section is visible, creating a smooth animation effect when the page loads or scrolls to it.
In the Media with text overlay > click open Theme Settings tab
Reveal sections on scroll: Make your website feel dynamic and responsive to user actions
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings