The Media with text section allows you to present an image or video together with accompanying text content.
Adding the media with text section
- Log in to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Media with text.
Section details
After adding the Media with text section, you will be presented with customization options and settings that you can adjust to match your store's style. The general settings for this section are split into Media and Content.
Media
These settings affect both the image and video, whichever media type is selected.
- Media width: Adjusts how large the image or video appears in the section.
- Media crop: Allows you to display the media at its original size or crop it to a shape, such as star or arch.
- Layout on desktop: Controls whether the media appears on the left or right side of the text on desktop. On mobile, the media always displays above the text.
Content alignment: Use this setting to align the text horizontally (left, right, or center).
Content position: Use this setting to align the text vertically (top, center, or bottom).
Color scheme: Determines the background and text colors for the section. Customize available color schemes in Theme settings > Colors.
- Show top padding: Adds extra space at the top of the section.
- Show bottom padding: Adds extra space at the bottom of the section.
- Enable full width: Makes the section span the entire width of the page when enabled.
Content
Use these settings to customize the text content displayed alongside the media.
- Heading: The largest text in the slide.
- Heading text size: Adjusts the font size of the heading text.
- Subheading or Text: Use this field to display supporting text or a brief description above or below the heading.
- Button text: Text used for the button.
- Button link: Adding a link here will route the customer to a particular page when the button is clicked.
Block settings
This section supports two available block types: Video and Image. The Video block is added by default. To use an image instead, remove the Video block, as only one block can be used at a time.
Video
Selects a video to display in the section. This block includes settings to Autoplay, Loop, Hide controls, and Mute video.
Use the Fallback image to display an image in case the video fails to load.
Image
Select the image you want to display for this section.