Skip to content
Install app
English

Collection spotlight

Let shoppers switch between collections and see products from each one in the menu.

Reference Growth Navigation · Pro Navigation 2 min read

A list of collections next to a product grid. Hovering a collection name shows its products, with a View all link; on mobile, shoppers tap a collection to open its products.

Add the block

  1. Pick the layout

    In the mega menu panel of the preview, click Add block. Click Collection, hover over Collection spotlight and click Select.

    (1) Click Collection, (2) pick Collection spotlight.
  2. Choose the collections

    In Edit Item, click Select collections and pick the collections to show. Products are loaded from each collection automatically.

    The Collection spotlight block in the preview, with its settings in Edit Item.
  3. Save and publish

    Click Save, then Publish. Check the result on your storefront: the editor preview shows placeholder cards instead of real products.

Settings

Select collectionsDefault: None
The collections listed in the block, in the order you pick them. Up to 8; if you select more, only the first 8 are kept.
Products per collectionDefault: 4
How many products the grid shows: 2 to 6.
Show product countDefault: On
Shows the number of products next to each collection name.
"View all" labelDefault: View all
Text of the link to the full collection under the grid.
WidthDefault: 100%
How much of the mega menu row the block takes: Auto or 8.33% to 100%.
VisibilityDefault: Off
Hide on desktop, Hide on mobile, Hide when logged in, Only show when logged in, Schedule publishing. See Settings every block has.

Tips

  • Keep the block at 100% width. The collection list and a grid of 4 products need room.
  • Pick 3 to 6 collections. A short list is easier to scan than all 8.
  • Products come from the collection itself, so you can’t hand-pick them. For specific products, use a Product list with the Manual source.

Was this helpful?

Report an issue