Section reference

Image text grid

Complete merchant reference for SAISON's editorial collection grid section: product stream, tile placement, repeat rules, card settings, collection header, swatches, and mobile behavior.

Shopify editor name: Image text gridFile: sections/image-text-grid.liquidUsed by editorial collection templates

The docs may call this feature Collection grid combinations or Editorial grid, but you edit it in Shopify as Image text grid. Use this reference when you need the exact setting group, recommended value, and common mistake.

Click-to-explore guide

Explore the collection grid before changing settings

Click the grid layout, product stream, product cards, editorial tile, promo tile, repeat rule, or mobile behavior. The inspector opens the matching Shopify settings and updates this local mock.

  1. Set grid columns and spacing.
  2. Confirm the product stream.
  3. Tune regular product cards.
  4. Add one editorial or promo tile.
  5. Use repeat rules for rhythm.
  6. Check mobile fallbacks.
Image text grid mockClick a grid area or behavior chip to inspect settings
Info

For visual combination examples, use the Collection grid combinations guide. For exact schema IDs and defaults across the full theme, use the All Settings Reference.

How Placement Works

SettingLocationRecommendedNotes
Product streamProduct grid blockStart with source = collectionProducts fill the first available grid cell from left to right.
Product placementProduct placement blockUse for index-based hero productsHighest priority for product spans. It styles product 1, 2, 3, and so on after product filtering.
Repeat ruleRepeat rule blockUse when a hero should recurApplies by row and target column, then assigns 1x1, 2x1, 1x2, or 2x2 spans.
Product metafield spansProduct metafields custom.grid_span_cols and custom.grid_span_rowsUse only for advanced product-specific layoutsApplied after placement and repeat rules.
Manual editorial blocksProduct tile, hero image, hero composition, look tile, promo tile, spacerUse for fixed content momentsCan use span and placement settings to occupy specific rows or columns.
Mobile behaviorRepeat rule and manual tile behaviorfallback_1x1 or full_widthPrevents large desktop features from dominating mobile.

Image Text Grid Settings

Product Grid Block

Product Placement Block

Product Tile Block

Hero Image And Hero Composition Blocks

Look Tile Block

Promo Tile Block

Repeat Rule Block

Spacer Block

Merchant Troubleshooting

The section is hard to find

In the Shopify editor, look for Image text grid. The docs also call the feature Collection grid combinations because merchants usually think of it by the page it builds.

The wrong product becomes large

Check product source, include tags, exclude tags, and sorting first. Then enable show_grid_overlay and update the product_placement.index value.

The repeat rule does not appear

Confirm the current row and target column match the repeat rule. If a 2-column tile cannot fit at the target column, it may fall back or skip depending on conflict settings.

Mobile feels too tall

Use mobile_behavior = fallback_1x1 on repeat rules and large manual tiles, set columns_mobile = 2, and review mobile_row_height_px.