> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Media With Text

**Theme:** Shine · **Section type:** All-template section

A Media with text section shows a row of columns, each with an image or a video and a short text. Use it to present product benefits, ingredients, values, or a set of short videos.

> **Note:** You can add this section to any template, except the header and footer. The section comes with 2 Image columns and 2 Video columns.
![Media with text section with five image columns](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/mwt-1_1o9stjq.jpg)

**What you can do**
- Add the section and your columns
- Add a video column
- Choose the layout on large screens and mobile
- Add a button below the columns
- See what customers see
- Change the column style and colors
- Fix common problems

---

## Add the section and your columns
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Media with text**.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave any of them empty to hide it.
4. Click an **Image column** block. Under **Image**, select an **Image**.
5. Under **Text**, enter a **Heading** and a **Description**.
6. To add a column, click **Add block** > **Image column** or **Video column**.
7. Click **Save**.

> **Tip:** Use images with a similar subject and background. Under **Media column item**, choose an **Image ratio** so all columns line up.

## Add a video column
1. Click **Add block** > **Video column**, or click an existing Video column.
2. Under **Video**, choose a **Video source**: **External** or **Shopify-hosted**.
3. For **External**, paste a YouTube or Vimeo link in **External video**. For **Shopify-hosted**, select a **Shopify-hosted video**.
4. Select a **Video thumbnail**. Customers see it until they play the video.
5. Under **Text**, enter a **Heading** and a **Description**.
6. Click **Save**.

## Choose the layout on large screens and mobile
1. Click the **Media with text** section.
2. Under **Large screen**, choose **Columns per row**: 3, 4, or 5.
3. Choose a **Section heading position**: **Top left**, **Top center**, or **Inline**. With **Inline**, the heading sits in the first column, next to the media columns.
4. Under **Mobile screen**, choose a **Section heading position** and a **List style**: **Grid** or **Carousel**.
5. Click **Save**.

## Add a button below the columns
1. Under **Button**, enter a **Label**.
2. Choose a **Style** and select a **Link**.
3. Click **Save**.

> **Note:** The button appears only when the section has a subheading, heading, or description.

## What customers see
- **Large screens:** the columns appear side by side, with the number of columns you chose per row. Extra columns move to a new row.
- **Phones:** with **Carousel**, customers swipe through the columns one at a time. With **Grid**, the columns stack. On wider phones and tablets, 2 columns show per row.
- **Videos:** a Video column shows the thumbnail with a play button. Customers click it to load and play the video in the column, with player controls.
- **Hover:** on large screens, the image zooms in slightly when customers point at a column.
![Media with text columns as a carousel on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/mwt-2_qwyodp.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Section subheading | Adds a short line of text above the heading. |
| Section heading | Sets the section heading. Put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the section heading: H2, H3, H4, or H5. |
| Section description | Adds text below the heading. |

### Media column item
| Setting | What it does |
| ---- | ---- |
| Item alignment | Aligns the column text Left or Center. |
| Image ratio | Sets the shape of the images and video thumbnails: 16:9, 1:1, 3:2, or 2:3. |
| Column heading size | Sets the size of the column headings: H3, H4, H5, or H6. |
| Enable item background | Shows each column as a card with its own background and text color. |
| Background | Sets the card background color. Used when Enable item background is selected. |
| Content | Sets the card text color. Used when Enable item background is selected. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section heading position | Places the heading at Top left or Top center above the columns, or Inline in the first column. |
| Columns per row | Sets how many columns show in a row: 3, 4, or 5. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading position | Places the heading at Top left or Top center. |
| List style | Shows the columns as a Grid or as a Carousel that customers swipe. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text. If you leave it empty, the button is hidden. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page that the button opens. |

### Image column settings
| Setting | What it does |
| ---- | ---- |
| Image | Sets the column image. |
| Heading | Sets the column heading. |
| Description | Adds text below the column heading. |

### Video column settings
| Setting | What it does |
| ---- | ---- |
| Video source | Chooses where the video comes from: External (YouTube or Vimeo) or Shopify-hosted. |
| External video | Sets the YouTube or Vimeo link. Used when Video source is External. |
| Shopify-hosted video | Sets a video from your Shopify files. Used when Video source is Shopify-hosted. |
| Video thumbnail | Sets the image customers see before they play the video. |
| Heading | Sets the column heading. |
| Description | Adds text below the column heading. |

## Troubleshooting
**The button doesn't appear.**
The button shows only when the section has a **Section subheading**, **Section heading**, or **Section description**, and the button **Label** isn't empty.

**My columns don't line up.**
Images with different shapes are cropped to the **Image ratio**. Choose the ratio that fits most of your images, and keep the important part in the center.

**My uploaded video doesn't play.**
Check that **Video source** is set to **Shopify-hosted**. The column plays only the video that matches the selected source.

**The card colors don't change.**
**Background** and **Content** work only when **Enable item background** is selected.

## Related articles
- [Shine Video With Text](https://doc.ecomx.co/en/article/shine-video-with-text-17s7kci/)
- [Shine Collage: Image With Text](https://doc.ecomx.co/en/article/shine-image-collage-with-text-1l2xj98/)
- [Shine Collage: Media](https://doc.ecomx.co/en/article/shine-content-collage-1bqbejq/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Image With Text Columns](https://doc.ecomx.co/en/article/blum-image-with-text-columns-section-131afjd/) · [Electro Image With Text Columns](https://doc.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-columns-section-s1z5a/)