Product page: Show product collections
Product collections are displayed on the product page using the collection block in the design builder. Here you choose which group of collections the block should display and how they look.
💡 Only one place
You create the collections on the product in the control panel. The block only controls the display. Read Product collections — overview and activation.
Add the block
1. Open the design builder and go to the product page.
2. Add the collection block.
3. Select the group you want to display.
You can add the block multiple times, for example one for Product variants at the top and one for Related products further down.
Select group
Each block displays one group. All collections in the group are displayed, each with its own display type.
Option | Displays |
|---|---|
Product variants | The product variant collection the product is part of |
Related products | The Related products collection |
Shop the Look | Shop the Look collections |
Custom | Custom collections |
Shared collections | Global collections connected to the product |
New blocks start with Custom.
Blocks that were set up before the groups were split show all collections belonging to the product itself, combined. This includes Custom, Related Products, and Shop the Look, but not Global or Product Variants. They will continue to function as before. If you choose a group instead, the block will only display that group.
Settings
Heading
- Show heading
- Show collection name
- Show product count
- Collapsed by default
The last three only apply when the heading is displayed.
Appearance
You set color, background, border, border radius, spacing, and number of columns for desktop, tablet, and mobile. Which settings you see depends on the display types.
Display type | Settings |
|---|---|
Basic | Product box for this block. If you select an advanced product box here, it only applies to this block. Otherwise, the store's default selection is used |
Image | Number of columns (1–10), whether product name is always shown, hover effect |
Color | Shape (circle or square), size (24–160 px), border color, number of columns (1–12), whether the name is shown, hover effect |
Shop the Look | Number of columns on mobile (1–4), border, border radius, and background on the collection, on the variant selector, and on each product card, as well as text, colors, and shape on the buy button |
Shop the Look is always displayed in one column on desktop. The variant selector can be shown with or without the name of the variant group above. If the text on the buy button is left empty, the store's default "Buy now" text will be used.
Highlight current product
Only applies to Product Variants, and only when Include current product is turned on in the collection. Image and Color collections always highlight the product the customer is looking at, by displaying it without a link. You choose how the highlighting looks.
Effect | Appearance |
|---|---|
None | No highlighting |
Border | A colored border |
Shadow | A shadow around the product |
Glow | A soft glow |
Ribbon | A small ribbon with the text «Selected» |
The effect uses your theme color if you do not want to choose a color yourself. It works the same way in product boxes, images, and color swatches.