Media with collection

A guide to engage storytelling meets targeted sales with the Media with collection section

The Media with Collection section takes storytelling to the next level.

This innovative feature seamlessly combines a captivating image/video with a curated product list, creating a dynamic and impactful way to showcase your offerings.

How to add a Media with collection section

Steps:

  1. In the theme editor (Customize), click Add section.

  2. Select the Media with collection section.

  3. Make necessary changes.

  4. Save the settings.

How to edit a Media with collection section

Section header

Use the provided text fields to add a suitable Heading.

  • Leave it blank if you do not want to display it

You can also change the Heading size to:

  • Heading xs

  • Heading sm

  • Heading md

  • Heading lg

  • Heading xl

  • Heading 2xl

  • Display md

  • Display lg

  • Display xl

Highlight text

How to apply Highlight text to the section heading and block headings?

Use the provided text fields to add a suitable Subheading and Description.

  • Leave them blank if you do not want to display them

  • Collection: Select a collection to display the product list alongside the video/image. This allows viewers to instantly identify the products featured in the video and explore them further.

  • Maximum products to show: Set the maximum number of products to show on the list (between 2-6 products).

  • Number of columns on desktop: 1-2 columns.

Mobile layout

  • Number of columns on mobile: The product list will be displayed below the media on mobile view. Set the product grid to show on 1-2 columns.

  • Enable swipe on mobile: Make the product list swipeable on mobile view.

Product cards

  • Image ratio: Adjust the image ratio of the product cards to 1 of the following values:

    • Use global settings (Theme settings > Product card)

    • Adapt to image

    • Square

    • Portrait

    • Landscape

Image settings

  • Image: Select an image as video's cover image or to display when no video is added to the section.

  • Image ratio: Set the image ratio of the featured image and video.

  • Desktop media position: Control whether the media is on the left or right side of the chosen product list on desktop view.

Shopify-hosted video, Or embed video from URL

  • Video: Select a video that you've uploaded to Shopify Files or insert a YouTube or Vimeo video URL.

  • Video alt text: Describe the video for customers using screen readers.

  • Enable video autoplay: Video are muted automatically to allow autoplay.

  • Enable video looping: Video is looped automatically.

Last updated