How to Code an Image to add an Item to Cart or Buy Now

Store Design
, ,

Topic summary

A user wants to make images on a landing page function as “Buy Now” buttons that add products directly to cart, bypassing the product page for faster checkout.

Proposed Solution:
Another user offers to provide code involving:

  • Adding a data-variant attribute to the image element with the product’s variant ID
  • Implementing JavaScript to handle the add-to-cart functionality

Current Status:
The solution remains incomplete. While code snippets were referenced, the actual code content wasn’t visible in the conversation. The original poster requested clarification on:

  • Where exactly to insert the data-variant attribute
  • Where to place the JavaScript code

The discussion is ongoing, awaiting more detailed implementation instructions for the custom Liquid/JavaScript solution on the Shopify landing page.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Is there a way to add some code to an image that allow a customer to click on the image and add a product to their cart? To have the image operate as a “Buy Now” button? I am using this for a landing page. I’d rather do this than direct a customer to the product page - I’d like them to be able to more quickly add it to cart.

Any advice is greatly appreciated.

This is the page I’d like to add the image coding to: https://claribelskincare.com/pages/antioxidant-skin-serum

2

Yes, you can surely add a product to cart on clicking on the button.

As per the landing page on which image click do you want to add a product to cart?

Let me know so I can provide the proper code so you can use it.

Thanks

3

Hi Anthony - I can link the top image or each individual image to this product: https://claribelskincare.com/products/hyaluronic-multi-peptide-serum

Thank you in advance for your help.

4

Hi @claribelskincar

I hope you have some knowledge of code.

Below is the code:

1: add data-variant=“123456” to the image and replace the 123456 with the actual varient for eg: it will look like

2: Add javascript to add product to cart

Hope this helps.

Let me know if any questions

Thanks

5

Hi Anthony, I do have coding experience but you lost me on where to add “data variant” info and where to add the javascript. Sorry. Could you perhaps point it out and I’ll find it? Thanks so much.