# Media with collection

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLD1bcY0J2QcffAvxa28F%2Fimage.png?alt=media&#x26;token=a4dd8f4a-c35d-437d-a9e6-fe0defbe7a6b" alt=""><figcaption></figcaption></figure>

The Media with Collection section takes storytelling to the next level.&#x20;

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

{% hint style="success" %}
**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.
   {% endhint %}

## How to edit a Media with collection section

### Section settings

#### 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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCKyRs8tbxjHwuLFIloxV%2Fimage.png?alt=media&#x26;token=ec8bd761-0b68-47cf-9d65-c4d06d95e646" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

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

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FUSBYYlGXbeSxfQUEnFNJ%2Fimage.png?alt=media&#x26;token=3033158b-bd7e-46cb-a016-8450e48841d4" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FhcsfKbgWJ1hBxDiUaL4m%2Fimage.png?alt=media&#x26;token=ae6d799a-2887-473b-8c75-4395f0dca7bf" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FsyPk3K1Mer80vHVA6VME%2Fimage.png?alt=media&#x26;token=7b57e5e9-3442-44fc-bb1d-c05387ecf578" alt=""><figcaption></figcaption></figure>

#### Image settings

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLmRGF1eV9H9ldsonwuwa%2Fimage.png?alt=media&#x26;token=bfc038f6-b9f6-401d-b9d3-8d6d894288cc" alt=""><figcaption></figcaption></figure>

#### 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](https://docs.foxecom.com/sleek-theme/theme-settings/product-cards))
  * Adapt to image
  * Square
  * Portrait
  * Landscape

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FUWqp7j3UiwVJ3ilaVRvC%2Fimage.png?alt=media&#x26;token=929ddd33-4502-4bf8-baeb-e328176d2e38" alt=""><figcaption></figcaption></figure>

### Block settings

You can add a maximum of 1 block to the **Media with collection** section.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FkqH8Af96X6ljdZEqZaMv%2Fimage.png?alt=media&#x26;token=be543757-a2c9-4f8f-b636-1df4e8dd131f" alt=""><figcaption></figcaption></figure>

There are 3 types of blocks:

* [Image](#image)
* [Video](#video)
* [Image card](#image-card)

If you want to add a plain image beside the product list, use block **Image**.

If you want to add an image with text over/under the image, use block **Image card**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fm1ArGSp8PzMiqLDd1oLK%2Fimage.png?alt=media&#x26;token=98aa101f-74af-43ce-a1cb-86fe7e9de981" alt=""><figcaption></figcaption></figure>

#### Image

* **Image**: Select an image to display as the featured media.
* **Image ratio:** Set the image ratio of the featured image:
  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fz05Im1HMtCFRgwUkq0qg%2Fimage.png?alt=media&#x26;token=7fd34c32-7e7a-44e3-ad8b-04276a48d917" alt=""><figcaption></figcaption></figure>

#### Video

Showcase a 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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FStIAbPTZ7jluktR54GwB%2Fimage.png?alt=media&#x26;token=51d5f63f-c88a-4678-8eda-19ae09dbd38a" alt=""><figcaption></figcaption></figure>

* **Cover image**: Select a cover image for the featured video.
* **Video ratio**: Set the image ratio of the featured video:
  * Adapt to image
  * Square (1:1)
  * Portrait (4:5)
  * Landscape (4:3)&#x20;
  * Widescreen (16:9)
  * Vertical (9:16)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F6YrJq76qns7sUKgsZhUE%2Fimage.png?alt=media&#x26;token=90ce6fe4-0e2f-4615-9902-0565bc937cf2" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FWzsE8x980ORAsQ1n1qMN%2Fimage.png?alt=media&#x26;token=a7152de3-27d2-440e-bb72-41a31a897c06" alt=""><figcaption></figcaption></figure>

#### Image card

Click **Select image** to assign the image to the card media and use the slider to change the **Image overlay opacity**.

Select the card's **Image ratio** as:

* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FsMj2fYvUsQ0UGd8cXTCi%2Fimage.png?alt=media&#x26;token=f128dae3-616b-415b-81d4-ba32a7439a24" alt=""><figcaption></figcaption></figure>

Add some text for the banner’s **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

to make your image card block look more balanced.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FjtOaHXpWf6NVDwh1Y9gj%2Fimage.png?alt=media&#x26;token=07d9e146-00c2-4342-8318-616e2320b473" alt=""><figcaption></figcaption></figure>

In **Highlight text:**

{% hint style="info" %}
See: [How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)
{% endhint %}

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

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fep48qNTnlFSiJl2xXD3K%2Fimage.png?alt=media&#x26;token=ef523d7c-7f29-44ea-a908-a39f6c649e25" alt=""><figcaption></figcaption></figure>

Add a call-to-action button that directs customers to the target page specified in the **Card link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F8hbigEoXgh8kMaxBKeKm%2Fimage.png?alt=media&#x26;token=fa37385b-1443-4d1f-a8e1-076a6f07d4c3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F8XptmdoIdTCmp30BpMRn%2Fimage.png?alt=media&#x26;token=4a85c2e5-847d-47a2-b1c5-1ac802e010a7" alt=""><figcaption></figcaption></figure>

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F8xntnWJSpXVsakRgA5Zy%2Fimage.png?alt=media&#x26;token=aa518a92-2fef-4b41-b10c-68bc8fd4a2d8" alt=""><figcaption></figcaption></figure>

In **Mobile settings**:

If you want to display a different card image on the mobile device, you can insert another image to the **Image** field.

You are able to display the content below or above the collapsible tabs by enabling/disabling the **Show content below image** checkbox.

<div><figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FnI0SL6gihpvEyW2jK0bW%2Fimage.png?alt=media&#x26;token=ff8c5cbc-b07b-4eb5-8bf4-79eead2b2d1b" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F0Y2CUE6JGX5iS6FU7gYL%2FMonosnap%20SLEEK%20GLOSSY%20%C2%B7%20Customize%20sleek-1.4.0%20%C2%B7%20Sh.png?alt=media&#x26;token=7e73ace4-cffe-4adc-b3be-75e360997a93" alt="" width="375"><figcaption></figcaption></figure></div>

Moreover,  the block also allows you to change **Content alignment** on mobile.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FfceQjV5djerTSWwOLFrg%2Fimage.png?alt=media&#x26;token=319d2d7d-65e4-4403-8a5d-f473e9278d59" alt=""><figcaption></figcaption></figure>