Add to cart button for Shopify

Question

Hi I have a configurable product that can come in 1000's of options. I know you can send data in a form like this to the cart:

<form action="http://your.shopify.url/cart/add" method="post">
<input type="hidden" name="id" value="VARIANT-ID" />
<input type="hidden" name="return_to" value="back" />
<input type="submit" value="BUY NOW" />
</form>

But instead of

<input type="hidden" name="id" value="VARIANT-ID" />

I would like to add the fields:

<input type="hidden" name=“price” value=“300” />
<input type="hidden" name=“info” value=“Bird fabric with black wood” />
<input type="hidden" name=“image” value=“imageOfProduct.png” />

and send this information to the cart. Can this be done? If not is there a way to do this? Thanks!

Update:

May be I’m missing something or maybe my question was not clear.

I have this code (a buy button) on my web page just plain HTML:

<form action="http://your.shopify.url/cart/add" method="post">
  <input type="hidden" name="id" value="VARIANT-ID" />
  <input type="hidden" name="price" value="300" />
  <input type="hidden" name="info" value="Bird fabric with black wood" />
  <input type="hidden" name="image" value="imageOfProduct.png" />
  <input type="hidden" name="return_to" value="back" />
  <input type="submit" value="BUY NOW" />
</form>

You say to make it work I should add to the product.liquid page:

  <input type="hidden" name="properties[price]" id="price" value="300" />
  <input type="hidden" name="properties[info]" id="info" value="Bird fabric with black wood" />
  <input type="hidden" name="properties[image]" id=“image” value=“image.png” />

I’m fairly sure the value should not be on the product.liquid page?

Thanks for your help!

Answer 1

Open product.liquid and after <form action="http://your.shopify.url/cart/add" method="post"> but before the submit button add

<input type="hidden" name=“properties[price]” id="price" value=“300” />
<input type="hidden" name=“properties[info]” id="info" value=“Bird fabric with black wood” />

Answer 2

This will be your button

<form action="http://yoururl.myshopify.com/cart/add" method="post" target="_parent">
  <input type="hidden" name="id" value="3569079681" />
  <input type="hidden" name="properties[URL]" value="http://" />
  <input type="hidden" name="properties[Image]" value="image.png" />
  <input type="hidden" name="properties[Fabric]" value="3569079681" />
  <input type="image" src="../img/design/cart.png" border="0" name="submit">
</form>

Then in the Shopify backend find "cart.liquid"

And paste this here: Where you place this snippet depends on your theme, but it needs to go inside the loop for cart.items and you'll likely want to place it right under the cart item's title.

{% for p in item.properties %}
  {% unless p.last == blank %}
    {{ p.first }}:
    {% if p.last contains '/uploads/' %}
    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
    {{ p.last }}
    {% endif %}
    <br />
  {% endunless %}
{% endfor %}

For more info: https://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization