How to display Multiple Color Variants on a featured product.

Store Design
1

On my website pawer.shop on my home page I want to display my featured product as multiple color variants. I found a way to kind of do it. I had to add my product into my products 3 more times (4 in total) and put each one in a collection with it’s color name. Only issue is now when I click the product and it goes to the featured product page it shows the color of which ever variant is the featured product but I want it to show the option as the color of the variant they picked. I hear this is super difficult to do. I started paying for “Smart product filter and search” but I can’t figure out how to get that to work either. If there was an easy copy and paste code For the Html that would be good but I feel like this isn’t an easy fix. Ive seen this question asked 1000 times on here but I never saw someone mention they have the correct variant displayed except when they click it and it changes to the featured product. I hope this made sense

2

Hi @pawers

can you please share the store url? You want a featured product on the homepage with multiple color options? you can acheive this using metafields which display your color variants on the featured product as individual product when you click on the color it redirects you to the selected color product page. is that what you are looking for?

Thanks

3

Third-party apps make it easy to separate variants. I own the Stamp – Collection Variants app , and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.
https://youtu.be/Pdk4JmfJjqQ

4

Hi @pawers

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

5

Hey @pawers ,

What you’re trying to achieve-showing multiple color variants on the homepage and having the selected color open the product page with that variant pre-selected-is possible but requires custom coding. The issue is that when you link to the product, it always opens with the default or featured variant.

A common solution is to add the variant’s ID to the product URL like this:

https://pawer.shop/products/product-handle?variant=1234567890

Where 1234567890 is the specific variant’s ID for that color. This way, when users click on the color option, it opens the product page with the correct variant selected.

You’ll need to:

  • Get the variant IDs from Shopify.
  • pdate the links on the homepage to include the correct variant ID for each color option.

It’s a simple copy-paste if you just need to set the links, but finding the variant IDs and updating them requires a bit of manual work.

If you want, I can guide you step-by-step or help with the code

Best Regards,

Rajat / Shopify Expert