variants appearing as individual products - but keeping the variant pill

Store Design
1

Hello

I have a product that has 2 types of variants ( size and color)

I would like to have the color variant also appear as an individual product inn the collection page

i see that this particular website has managed it

https://www.yujparis.com/en/collections/vetements-de-yoga/products/short-light-white

basically in the product page - the variant pill links to the other color product

this is my product right now

https://yogaspirit.mu/products/onyx-debardeur

thanks in advance

2

Hey @TBS2023 ,

To display color variants as individual products on your collection page in Shopify you’ll need to make some adjustments in your theme’s code. Here’s a step-by-step guide to achieve this:

Create Individual Color Products:

  1. Create New Product: For each color variant, create a new product in your Shopify admin. Use the same title as the original product but add the color in the title (e.g., “Onyx Débardeur - White”).

  2. Set Up Variants: Ensure that the original product has the necessary variants (size, color), and for each new product, make sure to set the correct size variant if applicable.

Link Variants to Individual Products:

Edit Product Page Code:

  1. Go to Online Store > Themes > Edit Code > Open the product-template.liquid file (the name may vary depending on your theme).

Modify the Color Variant Display:

  1. Find the section of code where the color variants are rendered (look for {% for option in product.options_with_values %}).

  2. Replace the color variant display code with links to the respective individual color product pages.

  3. For example:

{% for variant in product.variants %}
    {% if variant.option1 == 'Color' %}
        {{ variant.title }}
    {% endif %}
{% endfor %}

Ensure the links redirect to the respective individual color product pages.

Update Collection Page.

Adjust Collection Page Template:

  1. Go to Templates and find collection.liquid or collection.template.liquid.

2,. Ensure it loops through the product variants and displays the individual color products correctly.

By following these steps, you should be able to create a similar setup to the example you provided. If you encounter specific issues or errors, feel free to ask for more detailed assistance!

Best Regard,

Rajat Sharma

3

thanks - but i a little lost after finding the code

4

@TBS2023 ,

so will you like to send me you email so that I can message you so that we can discuss about this