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.
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 you select a product, you can also add a desired quantity, and then click Copy Button and paste the button anywhere on your Webflow site!
In addition, you can also add a product specific 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.
If you want to add multiple products to the cart using the same button, you can do this by clicking the + Add Another Product option.
This will make another search box appear and another quantity field.
Add your desired products and quantities and then copy the button and paste anywhere on your site.
The buttons operate through custom attributes. If you remove these custom attributes, the button will no longer function.
If you add an item with variants, we have an additional custom attribute that gets added in order to specify the selected variant options.
