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

Solved
odymac
Tourist
4 0 0

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!

Accepted Solution (1)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

This is an 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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 7 (7)
DP_Development
Pathfinder
83 11 17

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

Software Engineer and Frontend Developer
Fast, cheap and straightforward solutions! Shall I do this for you? Just send me a message!
Please click on like and "accepted solution" if my answer helped you.
LitCommerce
Trailblazer
288 71 72

This is an 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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

DP_Development
Pathfinder
83 11 17

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

Software Engineer and Frontend Developer
Fast, cheap and straightforward solutions! Shall I do this for you? Just send me a message!
Please click on like and "accepted solution" if my answer helped you.
odymac
Tourist
4 0 0

Hi @DP_Development 

Great, thank you a lot for your help

odymac
Tourist
4 0 0

Hi @LitCommerce 

It couldn't be clearer
Thank you so much!

LakayLola
New Member
1 0 0

Hi, 

 

Where do I actually put this coding? 

Thanks

LitCommerce
Trailblazer
288 71 72

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!