Product grid

The Product grid section can insert up to two Editorial tile blocks among the collection’s products. Use them for a formulation standard, a campaign story, or a link to a routine builder. The blocks are optional; removing both leaves the collection grid intact. Each collection template holds one Product grid, the collection’s main product list. All tile widths use a soft card shadow, following the selected color scheme’s shadow color, to separate editorial content from the product grid.

Add a tile

1. Open a collection template in the theme editor and select Product grid.
2. Choose Add block → Editorial tile.
3. Add an optional Image, Heading, and Body text. Without an image, the tile presents its copy on the chosen color scheme. In wide desktop tiles with copy, images fill 40% of the tile and the text uses the remaining 60%. Tiles up to 520px wide stack the image above the copy. The banner starts between 280 and 360px tall and grows when longer copy needs more room. Images fill their column using the Shopify focal point; on mobile, they stack above the text with a 4:3 crop. An image without copy uses a 16:7 crop on desktop and 4:3 on mobile. 2000 x 1500px .jpg is recommended. Add meaningful image alt text in Shopify’s media editor.
4. To add a call to action, set Link, then enter Link text. The link appears only when both are filled. Link text is available once a destination is selected. The action matches the blog posts’ Read more link, with a line arrow and the global text hover treatment. The arrow extends on hover or keyboard focus when interface motion is enabled and the customer has not requested reduced motion.
5. Choose Tile width: 1 column, 2 columns, or Full row (default). Columns match product tile widths. Mobile limits a two-column tile to the available one or two columns.
6. Set Grid position, from 1 through 26, then choose the tile’s Color scheme.

The heading and body defaults provide a text tile immediately. Replace them with your own copy. Only publish formulation and certification claims that apply to your products.

Set positions

Positions count products and editorial tiles together, starting from 1 on the first results page. For example, with at least five products and two blocks:

Grid item	Content
1–3	Products 1–3
4	Editorial tile with Grid position 4
5–6	Products 4–5
7	Editorial tile with Grid position 7

Choose different positions to place the tiles separately. If both request the same position, the first block in the editor appears there and the second takes the next slot. Reordering blocks breaks these ties; different positions determine their own order. Duplicating a block preserves its content, width, and position, so change its position to separate it from the original.

Tile width controls how much of the row each block occupies. A one-column tile sits beside products; a two-column tile uses the width of two products plus the gap between them. If there is insufficient room, the tile starts on the next row. Full row starts a new row after its preceding items, and the next product starts another row. Any unused columns stay empty; products keep their original reading order. For example, position 4 follows three products, even when the desktop grid has four columns. A wide product in Mosaic still counts as one item, so Grid position describes reading order rather than a particular row or column. The grid continues to show the selected number of products per page; tiles add to that number.

Filtering, sorting, and pagination

Show product type tabs turns the Product type filter into tabs above the grid, set by Product type tabs alignment. They need a Product type filter in the Shopify Search and Discovery app and at least two product types in the collection; otherwise the setting has no effect and Product type stays in the filters. Tab labels show product types exactly as written. Product type tabs keep the selected product type when shoppers change another filter or sort order, including when JavaScript is disabled. Rapid filter changes show the results of the latest selection. Clearing the maximum price restores the collection’s full price range. Price filter values work in any currency format, including ones with a comma decimal separator such as 12,50.

Color swatch filters show a focus ring and the color name for keyboard focus, touch, and hover, and mark a selection the moment it is tapped. A struck-through compare-at price always belongs to a variant at the price shown beside it; when prices vary, the Sale badge says only “Sale”.

Tiles appear only on the first results page. Sorting and filtering render them again at their configured positions. Numbered pages after page 1 contain products only. Load more and Infinite scroll append products without repeating the tiles, and product counts and screen reader announcements continue to count products only.

If Load more or Infinite scroll cannot load a page, a visible retry link stays available. Infinite scroll pauses automatic loading until the shopper retries successfully, then resumes.

A tile hides when the current page has too few products to reach its position. A position immediately after the last available item is allowed. In the theme editor, an unreachable tile shows a setup note so you can select it and lower Grid position. No tiles appear when there are no products, including when filters return no results.

A completely blank tile is omitted on the storefront. The editor displays a setup note in its slot so you can select it and enter content.

Content ownership

Shopify collection and product records own product selection, order, prices, variants, availability, and commerce media. Section settings own the grid layout, filters, sorting, and pagination. Editorial tile blocks own their images, headings, body text, links, color schemes, widths, and positions. They work with manual content and do not require metafields. The same collection template shares its tiles across the collections that use it; use a separate template for different editorial copy.