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 %}
  <div class="variant-item">
    <!-- Display variant image -->
    {% if variant.featured_image %}
      <img src="{{ variant.featured_image.src | img_url: 'large' }}" alt="{{ variant.title }}">
    {% else %}
      <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
    {% endif %}

    <!-- Display variant title -->
    <h2>{{ product.title }} - {{ variant.title }}</h2>

    <!-- Display variant price -->
    <p>
      {% if variant.compare_at_price > variant.price %}
        <span class="compare-at-price">{{ variant.compare_at_price | money }}</span>
      {% endif %}
      <span class="price">{{ variant.price | money }}</span>
    </p>

    <!-- Display Add to Cart Button -->
    <form action="/cart/add" method="post" enctype="multipart/form-data">
      <input type="hidden" name="id" value="{{ variant.id }}">
      <button type="submit" class="btn">Add to Cart</button>
    </form>
  </div>
{% 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 · Accepted solution]

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

It works for me!!