Display product variants - Craft theme

Solved

Display product variants - Craft theme

Paula_Benudiz
Tourist
6 1 0

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

Accepted Solution (1)

Paula_Benudiz
Tourist
6 1 0

This is an accepted solution.

Replies 3 (3)

Small_Task_Help
Shopify Partner
489 15 34

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

Click here to Contact and Get Shopify Store Help
We are Shopify Experts   from Ecommerce Small Task Company.
Paula_Benudiz
Tourist
6 1 0

Paula_Benudiz_0-1718708717256.png

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
Tourist
6 1 0

This is an accepted solution.