How to find my own 'Add to cart' button and How to add it into my 'Collections' pages?

Highlighted
New Member
2 0 0

I am new to Shopify and Liquid language. I saw a code on Google that we are able to copy+paste to add an 'Add to cart' button onto my Collection page BUT the css/style isn't the same as the one I am using on my website and I am not sure where to find the one that was provided by the theme: Simple.

 

My website is: craverypops.myshopify.com

pass: cloyoh

 

It'll be a big help! Thanks~

0 Likes
Highlighted

you will need to add the following to your product snippet, you haven't indicated what theme you use, if its a Shopify them it most likely will be in a file called product-grid-item.liquid

another theme may put the code straight in the collection liquid file

 

 

<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<select name="id">
   {% for variant in product.variants %}
      <option value="{{ variant.id }}">
         {{ variant.title }}
      </option>
   {% endfor %}
</select>
{% endif %}
<div class="product-form__buttons">
   <button type="submit" name="add" class="product-form__add-to-cart">Add to cart</button>
</div>  
</form>

 

 

Please like and mark my post as a solution if I've helped you, thanks.
0 Likes
Highlighted
New Member
2 0 0

I'm using a Shopify provided theme called 'Simple'. I added the code in but it doesn't seem to work. The 'Add To Cart' button takes me to my 'Product Details Page' which already has a function add to cart and buy now function. I guess I need to understand a lot more about what the code is telling me haha!

0 Likes