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

Technical Q&A
1

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!

2

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

2 Likes
3

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' %}
	
	
	
{% endform %}

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

{% form 'product' %}
	
	
	
{% endform %}

Hope it is clear to you.

3 Likes
4

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

5

Hi @DP_Development

Great, thank you a lot for your help :slightly_smiling_face: :slightly_smiling_face:

6

Hi @LitCommerce

It couldn’t be clearer
Thank you so much!

7

Hi,

Where do I actually put this coding?

Thanks

8

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.