Media with text

Media with text:

The Media with text section is a versatile and engaging way to combine media and messaging together.

How to set up the Media with text section?

Navigate to customization theme. At the top of the page, click the dropdown to select the Home page template.
Select “Media with text” from the left menu.
Customize this section by using the settings described in the following table:

Customize section settings:

Settings	Description
Subheading	The text to display in the block.
Subheading size	The size of the heading text. Extra extra large Extra large Large Medium(default) Small Extra small Extra extra small
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Heading size	The size of the heading text. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small
Caption	Optional text shown near the button area.
Description	Display paragraph-style text in the section.
Button label	The text that displays on the button.
Button link	The URL that you want the button to internal/external link to. Select this checkbox to enable/disable the link to be opened whether in a new window or not.
Image/Video Ratio	Sets the aspect ratio for media blocks: adapt, portrait, square, or landscape.
Make Media Full Width	Displays media as a full-width column (50%).
Desktop image placement	The Image placement layout for this section on desktop: Image first: Displays the image on the left. Image second: Display the image on the right. Note - Image first is the default mobile layout.
Desktop content position	Sets the position of the content on desktop. Left Center (default) Right
Text Alignment	Align the text in the container. Choose between left (default), center, or right.
Center text on mobile	Select this checkbox to enable/disable the “Center text on mobile” option on the mobile devices.
Column card settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Media ratio	The media ratio for the product images: Adapt to image: Adapt to image should only be used when images are the same dimensions. Square(default): Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Color scheme	A set of colors that you can apply to this section.
Enable make section background full width	Make the section the full width of the browser window.
Enable Slideshow Settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Auto-play slides	Select this checkbox to enable/disable the “Auto-play slides” option in the slider. It keeps changing slides automatically on the storefront.
Show next/previous arrows	Select this checkbox to enable/disable the “Show next/previous arrows” option in the slider. Note - Arrows will be visible only on desktop.
Slide Navigation style	The style of the slideshow navigation that appears below the image. None Dots Lines(default) Numbers
Change slides every	This settings will only work when the “Auto-play slides” option is enabled. And, it only provides a range of 2 to 9 seconds. Note - This will only work if auto-play is enabled.
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.

Block settings:

Settings	Description
Image	Select any image to display.
Pagination text	The text that displays on the pagination.
Video	Add or select your own video to the section. You can edit the video to use a custom cover image, as well as add some alt text. If a Shopify-hosted video is added, it will be used over a URL video from the setting below.
URL	The Youtube or Vimeo link to the video. The video must be publicly available and will only be shown if no Shopify-hosted video is added in the setting above.
Cover image	Select any cover image to display. The image that displays before a user plays the video.
Video alt text	The alt text for the video. Describes the context and purpose of the video for users using screen readers.
Pagination text	The text that displays on the pagination. Note - This text will only show on desktop.