Display product variants - Craft theme

[Paula_Benudiz]

Good afternoon everybody,

I would like my online store to display product variants separately:

Example: 1 Product - 3 variants; the three variants to be displayed on the product page.

I don’t want to use the App or duplicate the product for SEO reasons.

Can any kind soul help me with code for this theme?

Hug to everyone

[Small_Task_Help]

Hi,

Hope the following steps will help you

1. At edit code find the product Template (product.liquid or product-template.liquid file in the “Sections” or “Templates” folder)

2. Find the section where products details and variants are displayed

Something like {{ product | json }} or {{ product.selected_or_first_available_variant | json }}.

3. Add code to display Variants Separately

Code example

{% for variant in product.variants %}
  
    
    {% if variant.featured_image %}
      
    {% else %}
      
    {% endif %}

    
    ## {{ product.title }} - {{ variant.title }}

    
    

      {% if variant.compare_at_price > variant.price %}
        {{ variant.compare_at_price | money }}
      {% endif %}
      {{ variant.price | money }}
    

    
    
  

{% endfor %}

4. Also use css for style

5. Preview and save, then publish

Note - Backup Your Theme before making changes

[Paula_Benudiz]

Thanks Small_Task_Help,

Which I will chose? I don´t find the product Template (product.liquid or product-template.liquid file in the “Sections” or “Templates” folder)

[Paula_Benudiz]

https://www.youtube.com/watch?v=Ezm817Ozz8k

It works for me!!