Editorial product spread gives one product a magazine spread: a large photo, two or three close-up details, a pull quote, the story behind the piece, and a compact form so customers can choose a variant and add it to the cart without leaving the page. It appears on the Broadsheet preset's home page.
The product's title is the section's heading, and links to the product page. Until you choose a product, the section shows placeholder images and a placeholder title and price, on your storefront as well as in the theme editor, so choose a product before you publish.
Where to find it
In the theme editor, click Add section and choose Editorial product spread. You can add it to the home page or any other page that takes sections, as many times as you like.
Which images are shown
- Main image. Leave Main image empty and the section uses the product's own images: the selected variant's image if it has one, otherwise the product's first image. When a customer chooses a variant that has its own image, the main image changes to it, even if you picked a main image yourself.
- Detail images. Choose two or three in Detail images. Leave a detail image empty and the product's next images are used in its place.
The story
The text between the quote and the product form is built from theme blocks. Add a Text block for a paragraph about the piece, or combine headings, text, accordion rows and buttons. Theme blocks explains each one.
The product form
The form shows the price, the variant picker and the buy buttons, and works the same way as on the product page. Gift card products also get the recipient form. A link under the form takes customers to the full product page.
Layout options
On desktop the spread is two halves: the main image with the detail images on one side, and the title, quote, story and product form on the other. Image position chooses the side. On mobile everything stacks, image first.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Product | Product. | The product the spread is about. |
| Image position | Left or Right. Default: Left. | Which side the images sit on, on desktop. On mobile the image always comes first. |
| Images | ||
| Main image | Image. | Optional. A photo to use instead of the product's own image, for example an editorial shot. |
| Detail images | 2 images or 3 images. Default: 3 images. | How many detail images are shown beside the main image. |
| Detail image 1 | Image. | Optional. Leave empty to use the product's second image. |
| Detail image 2 | Image. | Optional. Leave empty to use the product's third image. |
| Detail image 3 | Image. | Optional. Leave empty to use the product's fourth image. Shown when Detail images is set to 3 images. |
| Text | ||
| 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 size | Small, Medium or Large. Default: Large. | How large the product title is set. |
| Pull quote | Text. | A line set large, like a pull quote in a magazine. Leave empty to hide it. |
| Quote attribution | Text. | Who said it, shown under the quote. Optional. |
| Product form | ||
| Style | Automatic, Buttons or Dropdown. Default: Automatic. | How options are shown. Automatic uses buttons for the option names listed in theme settings under Product options, and dropdowns for the rest. |
| Use swatches for options that have them | On or off. Default: on. | Shows color swatches for options that have them in Shopify. Options without swatches use the style above. |
| Show dynamic checkout button | On or off. Default: on. | Adds a second button that takes customers straight to checkout with their preferred payment method, such as Shop Pay or PayPal. |
| 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
Theme blocks
This section is filled with Masthead's theme blocks: headings, text, buttons, images, videos, products, collections, accordion rows, spacers and groups, in any order and nested inside each other. Theme blocks explains each one. The section holds up to 6 blocks at its top level.
App blocks
Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Main image | 2000 x 2500 px (4:5 portrait) | Cropped to 4:5 around its focal point. |
| Detail images | 1000 x 1000 px (square) | Cropped to squares around their focal points. Close-ups of fabric, stitching or hardware work well. |
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
- Pick a product whose photos already include close-ups, and the section fills itself in.
- Keep the quote to one sentence. It is set large, and long quotes push the buy button down the page.
- Use the section for one hero piece per page. For several products, use Featured collection or Collection tabs.