How to add a “Buy Now” button for a product to any page

Want to skip the product page and add a direct “Buy” button anywhere on your site? Now you can!

With our new product specific add to cart button component, you can add a button anywhere on your Webflow site that adds a specific product – including a specific variant, if needed – directly to the cart or takes the customer straight to checkout. No need to rely on generic buttons inside a template page. It’s perfect for landing pages, featured product sections, blog posts, or anywhere else you want quick access to a particular item.

Create a Direct Purchase Button for Specific Products

In Webflow, open the CartGenie app designer extension and navigate to the Create Product Pages > Components > Misc. section.

Here you’ll see a component called “Add to Cart Button (Product Specific)” and “Checkout Button (Product Specific)”. Select the option you prefer.

You will now see a search bar where you can find the product you want customers to purchase. Once selected, click Copy Button and paste it anywhere on your Webflow site!

You can then also add a checkout button if you prefer (which adds the item to cart and takes user directly to checkout page).

Done!

Now, anytime somebody clicks on the button, they will only purchase the exact product that you selected – regardless of which page it is on.

How does this work?

The buttons operate through custom attributes. If you remove these custom attributes, the button will no longer function.

The button uses the current product slug to know which item to add to cart. If your item’s slug changes, you will need to update it here as well.

If you add an item with variants, we have an additional custom attribute that gets added in order to specify the selected variant options.

If the variant’s option set name or values get changed in the product in CartGenie, it will break the button and you will need to update it here as well.