Buy Button

Buy Button allows you to add individual products to an external website or blog. You can use different product layout options, from a single Buy Now button to a full-size product card.

After the product is embedded into a 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 Button layouts

Depending on your use case, you can embed product cards with different layout options:

Layout	Use case
Button only	Just a Buy Now button, nothing more. 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).
Compact	A minimalistic product card with a Buy Now button. 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 quantity. If you have a sale price for this product, it will also be displayed.
Full-size	A full-scale product card with an Add to Bag button. This layout allows you to display all the available information about the product. You can choose from two layout options: 2 columns — in case you want to draw attention to product images 3 columns — in case you want to draw attention to product description

---

Creating a Buy Button

To add a Buy Button to a webpage, 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 Button, you need to set up your store account with products and payment/shipping options that you want to offer to your customers. If later you make any changes to the product details in your store admin (rename the product, change its price or description, etc.), these changes will immediately be reflected on the Buy Button.

To create a Buy Button:

1. From your store admin, go to Overview.
2. Scroll down to the Buy buttons card.
3. Click Get Started.
4. On the opened page, click Pick Product and use the search bar to pick a product you’d like to embed.

   You can also access the Buy Button creation wizard for a specific product straight from this product’s details page (the “Buy Now” Button tab).

5. Customize your Buy 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 customize the button, you can preview changes on the right.
6. Click Generate Code, then click Copy Code.
7. Log into your website backend and open the page where you want to display the Buy Button.

   If your storefront is closed from customers, the Buy 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.

8. 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.
9. Save the changes.

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”.

---

Customizing a Buy Button

After creating the Buy Button, you can additionally customize 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 & colors. 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.

• Change the look of the product card and buttons to match your website’s theme with the help of CSS codes (Design → Themes and in-depth customization → Add new CSS theme).