# Media with collection
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 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
#### 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
* **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.
#### 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.
#### 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
### Block settings
You can add a maximum of 1 block to the **Media with collection** section.
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**.
#### 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)
#### 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.
* **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)
* Widescreen (16:9)
* Vertical (9:16)
* **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.
#### 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)
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.
In **Highlight text:**
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)
Use the provided text fields to add a suitable **Subheading** and **Description**.
* Leave them blank if you do not want to display them
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)**.**
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
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.
 
Moreover, the block also allows you to change **Content alignment** on mobile.
