Color variants are individual products - how to show different variants in the product page?

New Member
2 0 3


Been Googling and searching this forum a lot, but haven't found a suitable solution. I might need a bit of a push to the right direction.

Our store has all the color variants as separate products - meaning "Dress A" does not have variants, we just have products "Dress A Blue", "Dress A Red", and so on. This unfortunately is the situation due to our product management system. We have quite a lot of products and many of them have a couple of variants.

The problem: we want to show different color options of the same product in the product page, preferably above the "Add to cart" button.

A few approaches I have been thinking:

  • Tag all the product variants with same tag (or similar tags) and use a liquid code to show the products.
    • Tried to find suitable code for this but didn't get it working. Also problem with tagging is that the store manager might forget to do it so it's not a completely fool-proof method.
    • Our theme Prestige can show one recommended product basing on tags. Tried to hack that but could not get it to show more products. The code is below in case anyone has any ideas how to hack it.
  • Same as above but using SKU's. Our SKU's are formed like 123-456-COLOR-SIZE. 123-456 representing the product.
    • Is it possible to show products with same six first digits from the SKU?
    • This would be probably the most solid option since SKU's are formed automatically and there is not much space for human error.
  • I'm also aware that there are some kind of product mapping applications and so.
    • We would rather do this with code instead of app, but please let me know if there are any suitable apps.
  • We could also use an app to combine the products to one product with variants.
    • This method also has some problems: we still want the variants to show up as products in collections. I know there are methods to achieve this, but it's again a bit of work. Also, as said, we would like to avoid apps.

Which direction should I take? At the moment I feel recommendation by SKU's or tags would be the way to go. What do you think? Do you have any code examples to work with? Found a couple of promising ones but could not get them working yet.

Below is a tag recommendation code of the theme. It can recommend only one product. Not sure if it could be hacked to show more products.



      We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
      {%- endcomment -%}

      {%- for tag in product.tags -%}
        {%- if tag contains '__with' -%}
          {%- assign product_handle = tag | split: '__with:' | last -%}
          {%- assign associated_product = all_products[product_handle] -%}

          {%- if associated_product != empty -%}
            <div class="Section Section--spacingNormal">
              <header class="SectionHeader SectionHeader--center">
                <h3 class="SectionHeader__Heading Heading u-h4">{{ 'product.buy_it_with.title' | t }}</h3>

              {% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

            {%- break -%}
          {%- endif -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endcapture -%}