Html code to create an isolated buy button for a specific product

[odymac]

Hello !

I work on a single product store and I want to add a buy button on the home page:

Does anyone know how I can create a "Buy now" button with a specific product ID?

The aim is that the selected product is added to cart, and if possible that the customer is redirected to the cart afterwards.

Thanks in advance!

[DP_Development]

Hi Odymac, 

this should work:

- Put your product in a collection

- Edit the code of your homepage like this:

- assign a variable for example "my_chosen_product"

- Iterate through your created collection until you reach the product with the specific ID

- assign this product to your variable "my_chosen_product"

- Put a Add-to-cart button wherever you want

- Add my_chosen_product.add_to_cart to your button form

Thats it, should work

[odymac]

Hi @DP_Development 

Great, thank you a lot for your help 🙂🙂

[LitCommerce · Accepted solution]

Hi @odymac,

You can use this code if you don't know the id variant:

{% assign product = all_products["product handle"] %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% form 'product' %}
	<input type="hidden" name="id" value="{{ current_variant.id }}" />
	<input type="hidden" name="quantity" value="1" />
	<button type="submit" name="add">Buy now</button>
{% endform %}

If you know the variant id or want to add a specific product, you can change this directly:

{% form 'product' %}
	<input type="hidden" name="id" value="id variant" />
	<input type="hidden" name="quantity" value="1" />
	<button type="submit" name="add">Buy now</button>
{% endform %}

Hope it is clear to you.

[DP_Development]

Wow, this is a cool and clean way to do this. I didnt expect the direct way to work, thanks for sharing.

[odymac]

Hi @LitCommerce 

It couldn't be clearer
Thank you so much!

[LakayLola]

Hi, 

Where do I actually put this coding? 

Thanks

[LitCommerce]

Hi @LakayLola,

You can add the code here anywhere you want to display the buy now button. Possible at layout/theme.liquid

Hope it is clear to you.