Material notes annotates a close-up photo with numbered notes on the fabric, the making and the finish, the way a magazine labels the details of a garment. Each note is a numbered point you place on the photo.
Where to find it
In the theme editor, click Add section and choose Material notes. You can add it to the home page or any other page that takes sections, as many times as you like.
Placing a note
Each Note block has a Horizontal position and a Vertical position, both from 0 to 100%. Horizontal is measured from the left edge of the photo and vertical from the top, so 50 and 50 is the center. Move the sliders in the theme editor and watch the point move on the photo.
Layout options
- Desktop. The photo sits beside the heading and text. Each numbered point is a button that opens its note in a small card next to the point.
- Mobile. The numbers stay on the photo, and the notes are listed under it in the same order, so nothing has to be tapped open.
Image position puts the photo on the left or the right on desktop.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The photo the notes sit on. A close-up of the fabric or a detail works best. |
| Image position | Left or Right. Default: Left. | Which side the photo sits on, on desktop. On mobile the photo always comes first. |
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Text | Formatted text. | A short introduction under the heading. Optional. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 6 blocks.
Note
One numbered point on the photo, with a heading and a few lines of text.
| Setting | Options | What it does |
|---|---|---|
| Heading | Text. | The note's heading, such as "Italian wool, 340gsm". |
| Text | Formatted text. | The detail behind it. A sentence or two. |
| Horizontal position | 0% to 100%. Default: 50%. | How far across the photo the point sits, from the left edge. |
| Vertical position | 0% to 100%. Default: 50%. | How far down the photo the point sits, from the top edge. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Image | 2000 x 2500 px (4:5 portrait) | Cropped to 4:5 around its focal point. Place your notes after you have set the focal point, because the crop decides where each detail lands. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Three or four notes are easy to take in. Six is the limit.
- Keep points apart from each other, and away from the very edges of the photo, so their cards have room to open.
- Write notes customers can feel: the weight of the cloth, where it was woven, how a seam is finished.
- Check the photo on mobile after placing notes. The numbers should sit on the detail they describe.