Custom add to cart button Shopify

Question

I am just trying to create an add to cart button to use on template and sections on my Shopify theme. Very simple.

Here is my code:

<form method="post" action="/cart/">
  <input name="id" value="1402808270917" type="hidden" />
  <input name="add" value="ORDER NOW" type="submit" />
</form>

Note: the value is the product id which I need to be able to hard code.

I'm not getting any errors, it's just going to the cart page stating cart is empty. The weird thing is, if I have something in the cart already, it will add a duplicate of the product.

Solution

You form need to action /cart/add

And you can't add to cart a product with the product id, you can only achieve this with a variant id.

If your product have only the default variant you can use this :

<form method="post" action="/cart/add">
  <input name="id" value="{{ product.variants.first.id }}" type="hidden" />
  <input name="add" value="ORDER NOW" type="submit" />
</form>

Comments

[user2684452]

Thanks for response it makes sense based off of what I've read, but how do I hardcode the variant id instead of {{ product.variants.first.id }}? This is going on a page template that has other products with other buy buttons. I've recently tried value="{{ all_products['product-handle'].id }}"

[Sulli Zerance]

you can use this : help.shopify.com/en/themes/customization/products/variants/…

[Sulli Zerance]

or just print it with {{ product.variants.first.id }} in your product page and copy it :)

[user2684452]

I was able to get the variant id, hard code it in the value and getting a "variant not found" error.

[Sulli Zerance]

are you sure having the good variant id ? can you share me the url of your store (and your product) ?

[user2684452]

here is the xml of the product, as to where I got the variant id hope this helps.

[Sulli Zerance]

I have create a test store : wearefortnite.myshopify.com/pages/test-add-to-cart My snippet is : <form method="post" action="/cart/add"> <input name="id" value="18800210542710" type="hidden"> <input name="add" value="ORDER NOW" type="submit"> </form> Where 18800210542710 is a variant Id. And as you can see it works fine on a page :)

[user2684452]

Let us continue this discussion in chat.