Build SAISON collection pages with the real Image text grid section: regular product cards, 2x2 hero products, manual product tiles, look tiles, promo tiles, hero images, and repeat rules.
SAISON's collection page is controlled by Image text grid. This section can be a clean product grid, but it is most useful when merchants need a curated collection page that still feels easy to shop.
Click the header, grid layout, filters, or product cards. The inspector opens the matching Shopify settings and updates this local mock.
In the theme editor, open the collection template and select Image text grid.
Add or select the Product grid block. Use source = collection for normal collection pages, manual for curated pages, and rule only when tag include/exclude behavior is intentional.
Set columns, row ratio, mobile row ratio, gaps, edge-to-edge, pagination, filters, sorting, and product card settings before adding editorial blocks.
Add one Product placement, Look tile, Promo tile, Hero image, Hero composition, Product tile, or Spacer block. Preview desktop and mobile before adding the next one.
Add Repeat rule blocks when the same treatment should recur by row and column. Use mobile_behavior = fallback_1x1 unless the repeated hero is important enough to stay large on phones.
How many grid cells appear across each screen size.
The grid feels too dense or too sparse.
4 / 3 / 2 for most stores.
Changing product card settings before deciding grid density.
The height logic for each grid row, either aspect-ratio based or fixed pixels.
Product or editorial crops need a consistent shape.
ratio_3_4 or ratio_4_5 for fashion and lifestyle; custom_px for fixed campaign rows.
Using custom height before final media is uploaded.
The horizontal and vertical space between product and editorial tiles.
The page needs editorial edge-to-edge rhythm or classic catalog spacing.
0 to 12px. Use 0 for editorial, larger gaps for catalog clarity.
Large gaps with many 1x1 products, which makes the collection feel slow.
Collection controls that let customers filter and reorder products.
Customers need to narrow large collections.
Enable for medium and large catalogs.
Expecting filters to appear before Shopify Search & Discovery filters are configured.
A temporary builder overlay that shows grid rows, columns, and product indexes.
You need to debug product indexes, rows, or columns.
On while building, off before launch.
Leaving the overlay visible on a published theme.
A product-stream position that receives a larger custom span.
A product from the stream should become larger.
Use index 1 for the first hero, then use sparse later indexes.
Forgetting that filtering and sorting can change the visible product index.
Rules that automatically make product tiles larger at repeating row positions.
A product hero treatment should repeat automatically.
every_n_rows_left or every_n_rows_alternating with 2x1 or 2x2.
Repeating too often and hiding too many regular products.
How large desktop feature tiles resize, collapse, or hide on phones.
Large desktop tiles make mobile browsing too tall.
fallback_1x1 for most repeat rules; full_width only for important editorial moments.
Using inherit for every large tile without checking phone preview.
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| source, products, include_tags, exclude_tags, max_items | Product grid block | source = collection and max_items = 24 to 48 for most collection pages | Manual products do not follow collection sort order; tag filters must match Shopify product tags exactly. |
| show_price, show_vendor, show_quick_add, hover_secondary_image | Product grid block | Show price, show quick add for simple products, hide vendor unless multi-brand | Quick add should be tested with variant-heavy and sold-out products. |
| card_media_source, card_gallery_mode, card_gallery_max_images, card_gallery_nav_style | Image text grid > Cards and Card gallery | Inherit global behavior unless the collection has a special campaign crop | Per-section overrides are useful but can make product cards inconsistent if overused. |
| swatch_display_mode, swatch_shape, swatch_size_px, swatch_gap_px, swatch_border_opacity | Image text grid > Swatches | below_card, circle, 16px, 7px gap | Hover overlay is desktop-focused; below-card swatches are clearer for mobile. |
| show_collection_image, hide_first_hero_text, collection header colors and sizes | Image text grid > Collection header | Use collection image only when it supports the page story | Hide first hero text only when the visual hero is self-explanatory. |
| image_scroll_effect | Image text grid > Animation | none or reveal | Use zoom sparingly on product-heavy grids. |
| margin_top, margin_bottom, padding_top, padding_bottom | Image text grid > Spacing | Use defaults first | Adjust after surrounding sections are placed. |