The Buy Now Button allows you to add individual products to an external website or blog. You can use different product layout options, from a single to a full-size product card.
After the product is embedded into the page, customers can click the button to add the product to cart and continue to checkout without ever leaving the site. The orders will be available for tracking from the My Sales → Orders page in your store admin.
Buy Now Button layouts
Depending on your need, you can embed product cards with different layout options:
Layout
Just a Buy Now button, nothing more.
Use case
You can use this layout if a product is already showcased on your site page, and you only need to add the online checkout option (e.g., it’s a blog post to advertise your item, or you have already designed the page dedicated to this product on your website).
Layout
A minimalistic product card with a Buy Now button.
Use case
This layout allows you to give a short, 1 column summary of a product using its main image, name, and price. You can additionally display available product options and quantity. If you have a sale price for this product, it will also be displayed.
Layout
A full-scale product card with an Add to Bag button.
Use case
This layout allows you to display all the available information about the product. You can choose the layout of columns which can be used to draw attention to product images and to draw attention to your product description.
You can add only one product per page with a full-size layout. The related products section will not be displayed on the product card.
Creating a Buy Now Button
To add a Buy Now Button to a web page, you need to generate a product’s individual integration code. After that, you can embed your product into any website or blog. The product card can be placed anywhere on a webpage, on a side panel, site footer, or on an error page.
Before creating a Buy Now Button, you need to set up your store account with products and payment/shipping options that you want to offer your customers. If later, you decide to make any changes to the product details in your store admin (rename the product, change its price or description, etc.), these changes will immediately reflect on the Buy Now Button.
To create a Buy Now Button:
-
From your store admin, go to Catalogue
-
Select the product
-
Click the “BUY NOW” Button tab
-
Click Embed Products
-
Customise your Buy Now Button:
-
Pick a layout — Compact, Button only, or Full size
-
Set up the button appearance — pick what product details you want to show (product name, price, options, etc.) and how.
As you customise the button, you can preview changes on the right.
-
Click Generate Code, then click Copy Code.
-
Log into your website backend and open the page where you want to display the Buy Button.
-
Paste the integration code to a page. Depending on your website, that may be an HTML or source tab or a separate button to add codes. If you are not sure how to add custom codes to your website, please contact your website developer for more detailed instructions.
-
Save the changes.
If your storefront is closed (customers see the ‘storefront under maintenance’ sign when they go to your site), the Buy Now Button won’t be displayed on the site page. You can check whether your storefront is open on the Store Profile page in your store admin.
That’s it! Now you have a product card embedded in your webpage.
When customers click the Buy Now/Add to Bag button, the product will be added to cart, and they can proceed to checkout.
If you want the checkout window to open immediately when a customer clicks on the button, you can go to Settings → General → Cart & Checkout → Checkout settings and switch the toggle next to “Open bag when “Add to bag” is clicked”.
For WordPress users: you can add a single product to a page using the store plugin tool.
Customising a Buy Now Button
After creating the Buy Now Button, you can choose customise its appearance and style to fit your needs and your company’s brand:
-
Change texts on your Buy Now or Add to Bag buttons using the Store Label Editor. For example, if your customers don’t buy the product right away (e.g., they place a pre-order or request a quote).
-
Hide the footer menu or breadcrumbs in Design → Storefront navigation & colours and Design → Navigation. It can be useful if you’re going to add different product cards to different websites and don’t want customers to navigate your store.
-
Hide the footer menu or breadcrumbs in Design → Storefront navigation & colours and Design → Navigation. It can be useful if you’re going to add different product cards to different websites and don’t want customers to navigate your store.
Changes made on the Design page affect all the products in your store.