Similar Products Block

Similar Products points customers to alternatives to the product they are looking at - the same design as a hoodie, the same mug in another size, the next model up. Each card links straight to that product page.

Add it via Product Section → Add block → Similar Products.

How it differs from Complete the Look

Both blocks show a row of products, but they do opposite jobs:

	Complete the Look	Similar Products
Purpose	Buy something in addition	Switch to an alternative
Card	Variant pickers + Add to cart	Image, title, price - the whole card links
Customer stays	on this page	goes to the other product

That is why Similar Products has no variant picker and no cart button on purpose. An alternative that can be added to the cart would put a second version of the same design in the basket instead of letting the customer choose - and the variant options of a different product type (hoodie sizes vs. shirt sizes) rarely match anyway.

Both blocks can be used on the same page.

Filling the list

Pick the products in Products. To have it differ per product without editing the theme every time, use a metafield:

1. Shopify Admin → Settings → Custom data → Products → Add definition, e.g. "Matching products", type Product (list).
2. Fill it in per product.
3. In the theme editor, click the dynamic source icon on the Products field and pick the metafield.

An empty list hides the block

On the storefront, a block with no products renders nothing at all — no heading, no empty gap, not even an empty container. Customers never see a half-finished block.

In the theme editor you see sample cards instead, with a note underneath saying they are only a preview. That is deliberate: the block would otherwise be invisible in the editor and impossible to position, and you would have to fill every product before you could see whether the layout works at all.

This matters most with a metafield-driven list. Product A has three alternatives and shows them; product B has none and simply drops the block. Both use the same template, and neither needs a setting changed.

Up to 12 products are shown.

Arrows appear only when they are needed

The arrows show up automatically only when there are more products than fit on screen - and they are decided separately for desktop and mobile. With three products and "3 per row" on desktop the arrows disappear there, while they stay on mobile if only two fit. No setting needed, and no arrows sitting above a single product.

Where to place it

Put it after the product details, not in between them. A good order on the product page is:

1. Buy - price, variants, add to cart, payment
2. Understand - description, accordions, certificates
3. Alternatives - Similar Products

Dropped in the middle of the product details it reads as an interruption: the eye expects more about this product and gets a different one instead. At the end it lands exactly where undecided customers are.

The dividers

Because the block changes the subject, it can fence itself off with a line - above, below, or both. Both are off by default. Thickness (1-6px), color and the spacing are shared by both lines, so they always match; a hairline in your border color is usually enough.

• Above only - when the block ends the page, or sits after the last detail
• Both - when it sits between two other blocks and needs to stand apart
• Below only - when something above already separates it, e.g. a certificate row

A colored background box would be the obvious alternative, but in a narrow product column it reads as an ad and pulls attention away from the add to cart button. The lines do the same job quietly.

Settings

• Heading - e.g. "Also available as"
• Show price - on by default; useful when the alternative costs more
• Products per row - desktop 2-4, mobile 1-2
• Card image ratio - adapt to image or a fixed ratio
• Secondary image on hover
• Typography - product title and price size, separately for desktop and mobile
• Product badges - on/off, type, position, custom badge text (uses the global Product Badges settings)
• Divider - line above and/or below the block, shared thickness, color and spacing
• Block margin - desktop and mobile

Tips

• One clear heading works better than a generic one: "Also available as" tells customers what they are looking at, "You may also like" does not.
• For print-on-demand or design shops this is the strongest cross-sell there is: the customer wants the design, not the garment. Show the same design on other product types.
• Keep the list short. Three to six alternatives are easy to compare, twelve are a catalogue.