# Image with text Source: Image with text puts a photo or a video side by side with a heading, text and buttons. Use it to present a collection, explain your sizing, or tell the story behind a product. You can add it to any page. ## Add and arrange the content The text side is built from blocks. Add **Caption**, **Heading**, **Text** and **Button** blocks and drag them into the order you want; each type can be used more than once. They are the same blocks as in the [Rich text](https://docs.ictsviluppo.example/dossier/sections/section-rich-text) section. - The first heading also names the section for screen readers, so start with a heading when you have one. - A button without a link is hidden in your store. In the theme editor a notice marks it until you choose a link. **Content alignment** puts the text on the left or in the center. The text is always centered vertically next to the media. ## Choose an image or a video **Media** decides what fills the frame: - **Image**: a portrait photo works best, 1600 x 2000px recommended. Write its alternative text in **Content > Files** in your Shopify admin. - **Video**: an MP4 file uploaded to Shopify. It plays muted and on loop. - **YouTube or Vimeo video**: paste the **Video URL**. It plays muted, on loop and without controls. The **Image** you choose is shown until the video starts. Each type has an optional mobile version, used on screens narrower than 768px. A mobile image uses the alternative text of the main image, so show the same subject. Videos start when at least half of the frame is on screen, and show a pause button in the corner. For visitors who prefer reduced motion, and in browsers with JavaScript turned off, videos don’t start: the cover image is shown instead. **Media ratio** sets the shape of the frame, portrait, square or landscape, for every type of media. The image is cropped to fill it. ## Put the media on the left or on the right **Media position on desktop** puts the media on the left or on the right on tablets and computers. On phones the media is always shown first, above the text, whatever side you choose. In right-to-left languages, such as Arabic and Hebrew, the two sides swap automatically. ## Make it touch the sections around it With **Use full page width** on, the media reaches the edge of the screen and the text sits in the other half. **Vertical spacing** is set to **None** by default, so the section touches the sections above and below like a solid band. Choose **Compact**, **Regular** or **Spacious** to add space around it. ## Show it only between two dates Turn on **Schedule visibility** and set a start, an end, or both. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling). ## Settings | Setting | Type | Default | Options | | - | - | - | - | | **Media** | Drop-down | Image | Image, Video, YouTube or Vimeo video | | **Image** — 1600 x 2000px recommended. With a YouTube or Vimeo video, shown until the video plays. Alt text comes from the image. Shown when *Media* is not *Video* | Image | — | — | | **Mobile image** — Optional. Shown on screens narrower than 768px. 1080 x 1350px recommended. Alt text comes from the desktop image, so use the same subject. Shown when *Media* is not *Video* | Image | — | — | | **Video** — Plays muted and on loop. Visitors can pause it. Shown when *Media* is *Video* | Video | — | — | | **Mobile video** — Optional. Shown on screens narrower than 768px. Shown when *Media* is *Video* | Video | — | — | | **Video URL** — Plays muted and on loop, without controls. Visitors can pause it. Shown when *Media* is *YouTube or Vimeo video* | Video URL | — | — | | **Mobile video URL** — Optional. Shown on screens narrower than 768px. Shown when *Media* is *YouTube or Vimeo video* | Video URL | — | — | | **Media position on desktop** — On mobile, the media is always shown first. | Drop-down | Left | Left, Right | | **Media ratio** | Drop-down | Portrait | Portrait, Square, Landscape | | **Layout** | | | | | **Content alignment** | Drop-down | Left | Left, Center | | **Use full page width** | Checkbox | On | — | | **Vertical spacing** | Drop-down | None | None, Compact, Regular, Spacious | | **Color scheme** | Color scheme | scheme-1 | — | | **Schedule** | | | | | **Schedule visibility** | Checkbox | Off | — | | **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — | | **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — | ## Blocks ### Caption | Setting | Type | Default | Options | | - | - | - | - | | **Text** | Text | Add a caption | — | ### Heading | Setting | Type | Default | Options | | - | - | - | - | | **Heading** | Text | Describe what makes your pieces last | — | | **Heading size** | Drop-down | Medium | Small, Medium, Large | | **Heading level** — Changes how search engines and screen readers read the page structure, not the size. Use H1 only if the page has no other main heading. Paragraph and Div look like a heading but are read as plain text. | Drop-down | H2 | H1, H2, H3, H4, H5, H6, Paragraph, Div | ### Text | Setting | Type | Default | Options | | - | - | - | - | | **Text** | Rich text | Tell customers how your garments are made: fabrics, finishing, and care. | — | ### Button | Setting | Type | Default | Options | | - | - | - | - | | **Label** | Text | Learn more | — | | **Link** | Link | — | — | | **Style** | Drop-down | Link | Link, Solid |