Add Variants to product grid

CreaWeb
Tourist
7 0 1

Hello,

I am using a theme called accu, and there is a product grid for example on the home page for quick buying.

The problem is these quick buy items in the grid don't show a selector for the variant so its basically useless... Now I wanted to add it by just copying the code of the variant selector from the real product page to the grid, but if I select another variant it still uses the basic one when I click buy...

The code i copied from the product page was this one...

 

{% assign variant = product.selected_or_first_available_variant %}


{% form 'product', product, id: "AddToCartForm", class: "product-form" %}
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}

<div class="selector-wrapper-secton" {% if hide_default_title %} style="display:none;"{% endif %}>
{% if settings.enable_color_swatch %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<select name="id" id="productSelect" class="{% if hide_default_title %} product-single__variants {% endif %}" >
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>
</div>

 

and the code for the add to cart button on the grid is this:

{% if settings.enable_add_cart %}
<li>
{% if product.available %}
<form action="/cart/add" method="post" class="variants clearfix" id="cart-form-{{ product.id }}">
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
<a title="{{ 'products.product.add_to_cart' | t }}" class="add-cart-btn">
<i class="fas fa-shopping-cart"></i>{{ 'products.product.add_to_cart' | t }}
</a>
</form>

{% endif %}
</li>
{% endif %}

 

Would really appreciate any help.

0 Likes

Hi @CreaWeb 

 

Please try replacing the default code snippet which you provided with the following:

 

 

{% if settings.enable_add_cart %}
<li>
{% if product.available %}
<form action="/cart/add" method="post" class="variants clearfix" id="cart-form-{{ product.id }}">
  {% if product.options.size > 0 and product.variants[0].title != 'Default Title' %}        
    <div> 
      <select name="id">
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>    
    </div>  
  {% else %}  
    <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
  {% endif %}         
<a title="{{ 'products.product.add_to_cart' | t }}" class="add-cart-btn">
<i class="fas fa-shopping-cart"></i>{{ 'products.product.add_to_cart' | t }}
</a>
</form>
{% endif %}
</li>
{% endif %}

 

The above code will display variants in a drop down with their individual price.

I hope this will solve your issue.

Thanks,

Suman Saurabh

Suman Saurabh | Expert in Shopify Development
✅ Was my reply helpful? Please Like & Accept Solution
✅ Want to hire me? Send PM or Skype: omnisitecreations
0 Likes
CreaWeb
Tourist
7 0 1

Thanks very much SumanSaurabh,

I used your code and it works perfect with a few adjustments.

Is it possible to also change the image according to the selected variant?

I think the code for the image is this one, I already tried to put the "product.selected_or_first_available_variant. " instead of only product. before the image.src but it doesnt work.

<div class="ImageOverlayCa"></div>
      {% if settings.secondary_image_use %}
      
      {% if product.images.size > 1 %}
      <div class="reveal"> 
        <span class="product-additional">      
          <img src="{{ product.selected_or_first_available_variant.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        </span>
        <img  src="{{ product.images.last | product_img_url: img_size }}" class="hidden-feature_img" alt="{{ product.images.last.alt | escape }}" />
      </div> 
      
      {% else %}
      
      <img src="{{ product.selected_or_first_available_variant.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
      {% endif %}
      
      {% else %}
            <img src="{{ product.selected_or_first_available_variant.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">

      {% endif %}

 

0 Likes

Hi @CreaWeb ,

This requires a custom solution that requires to add some javascript and edits of more than one places. The solution can be determined after visiting your website only.

Thanks!

Suman Saurabh | Expert in Shopify Development
✅ Was my reply helpful? Please Like & Accept Solution
✅ Want to hire me? Send PM or Skype: omnisitecreations
0 Likes