This guide describes Dossier 0.x. Your store has Dossier , so some settings may be different or missing.
Image with text
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
Section titled “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 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
Section titled “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
Section titled “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
Section titled “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
Section titled “Show it only between two dates”Turn on Schedule visibility and set a start, an end, or both. See Scheduling.
Settings
Section titled “Settings”| Setting | Type | Default | Options |
|---|---|---|---|
| Media | Drop-down | Image |
|
| 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 |
|
| Media ratio | Drop-down | Portrait |
|
| Layout | |||
| Content alignment | Drop-down | Left |
|
| Use full page width | Checkbox | On | — |
| Vertical spacing | Drop-down | None |
|
| 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
Section titled “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 |
|
| 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 |
|
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 |
|
Theme and guide by ICT Sviluppo