Display product variants - Craft theme

Store Design
2

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 }}.

  1. 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 %}

  1. Also use css for style

  2. Preview and save, then publish

Note - Backup Your Theme before making changes