Reference / Related Products Block
Display related products, collections, variants, or blog posts from reference metafields on your storefront.
Supported Metafield Types
Single value types:
product_reference— a single related product cardcollection_reference— a single collection cardvariant_reference— a single product variant card
List types:
list.product_reference— multiple product cards in a grid or sliderlist.collection_reference— multiple collection cards in a grid or sliderlist.variant_reference— multiple variant cards in a grid or slider
Customization Options
Heading
Add attention-grabbing text at the top of the block (e.g., "You might also like").
Colors
Adjust text and background colors to match your theme design.
Text Size
Modify the typography scale for product titles and prices.
Border Radius
Adjust the corner roundness on item cards for a modern or classic look.
List Layouts
When using list metafield types, multiple reference cards are displayed together with two layout options:
Grid
Cards are arranged in a responsive CSS grid. Configure the number of columns to control the layout density. Each card displays the resource image, title, and price (for products).
Slider
Cards are displayed in a horizontal slider that customers can scroll through. This is ideal when you have many related items but want to keep the block compact on the page.
Grid Columns
Set the number of columns (1–6) for the grid layout. The column count determines how many cards appear per row.
Spacing
Control the gap between cards in both grid and slider layouts.
- Related products Use
list.product_referencewith a grid layout and a heading like "You might also like" - Shop the look Display complementary products for an outfit or room setup
- Collection showcase Use
list.collection_referenceto highlight featured collections on a landing page - Variant gallery Use
list.variant_referenceto showcase specific variants across products