Shopify Question posted in
The Shopify help center can be found here.

Shopify/Liquid, add product variant of specific size to cart

im probably having this issue due to my lack of my experience with the liquid and the shopify platform in general.

Here’s my issue:

In the current theme im working on, when a product is added to card it is always adding the smallest available size. Im not 100 % confident this is the code that is actually doing it but im fairly positive it is.

onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

Currently when this code is fired the products smallest size (assuming its the first) is added to the cart.

I tried to take a look at the shopify API documentation for product.variants but it seems the theme or store is not using the latest version since I cant find any references to this first property.

What I would like if for there to be control in terms of product size when the add to cart action is triggered. Instead of adding the smallest size always it can persay add product.variants.{SIZE}.id instead (Not actual code just a guess)

If anyone could point me in the right direction of proper documentation for something like this or if you’ve had a similar question I would greatly appreciate it!

Tags:

2

Answers


  1. 0

    Almost all themes, free or paid, have proper functioning code to handle changes in variations. When a customer selects a variant, via a change in a select element or perhaps the click of a radio button, the existing code should update the currently selected variant properly. Your example of an onclick set to the first variant is probably one the most primitive modes of operation, and as you see, less than satisfactory.

    As a beginner, your best bet is to download the Debut theme from Shopify and study the basics of how variant selection work from the position of working code. Only then could you hope to be able to mod your own themes.

    Login or Signup to reply.
  2. 0

    this is easy 🙂

    yes this is the code sending the product to the cart and this theme don’t support product variants. You should add the variants support.

    some theory:

    Variants is an array.
    variants.first is a liquid function for easily take the first element of the array, check the liquid docs for more details.

    The important part is, to add an item you need to send the variant id. always is the variant id.

    now the magic:

    you need to iterate on product.variants, keep on someplace the variant id and finally pass the value to the function.

    onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

    by

    onclick=" Shopify.addItem( {{ variant.id }}, 1);

    you can use wherever you want, you can use select, or even got for a pure js / ajax solution using the cart API

    extra detail the 1 is the qty, you can set it dinamic too.

    I don’t know your desing, so on psedo-code with multiple buttons you can do:

     {% for variant in product.variants %}
   <button onclick="Shopify.addItem('{{ variant.id }}', 1)">
     {{ variant.title }}
   </button>
 {% endfor %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search