How to Show all products separately and also on each product page show it's variant with Picture

Shopify Discussion

Topic summary

A Shopify merchant wants to display product variants as separate products while also showing related color/style options on each product page, similar to a reference site. They’re using the Dawn theme and initially tried implementing this with custom Liquid code but encountered issues with section vs. block placement.

Solution Provided:

  • Use Shopify’s Custom Data (metafields) to create a “Product Separate Variant” definition
  • Modify main-product.liquid to add a custom block type
  • Create a new snippet file product-separate-variant with specific Liquid code
  • Configure the block in the theme customizer and assign related products via metafields on individual product pages

Technical Issues Resolved:

  • Initial confusion between creating a section vs. snippet (causing errors)
  • Image sizing problem with the image_url filter (resolved by adding CSS for height/width)
  • Block positioning appearing in wrong location (fixed after proper implementation)

Status: The original poster successfully implemented the solution with guidance from @devmont-digital. Several app developers later suggested automated alternatives (Variant Robot, Product as Variants, Stamp – Collection Variants) for merchants seeking no-code solutions.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
8

Yes I understand and troubleshoot the error now it’s working. Thank you very much. i need one more help with this line of code I mentioned below, I want to show images in a 90x90 dimension but when i do that image doesn’t load.

Code used:

Result:

holygrails_in_0-1719835707251.png
holygrails_in_0-1719835707251.png1366×768 246 KB

Can you with this also?