The Buy Buttons app helps to market your brand and grow your business by extending your BigCommerce products and functionality to:

  • blogs
  • social media posts
  • marketing emails
  • landing pages
  • advertisements
  • anywhere you can add HTML

A Buy Button is a piece of code that can be implemented into any of the above media. It adds a product card with a thumbnail image and an action button, which can link to a product detail page, add the product to your BigCommerce store's shopping cart, or add the product to the cart and forward the user directly to checkout. They can be sized to fit specific dimensions (card types) and customized to reflect your business's colors and brand.

Using a Buy Button is one of the simplest and easiest ways to monetize or add a shopping call-to-action to existing content.

 
 

Install the Buy Buttons App

Go to Channel Manager and click + Create Channel. Scroll down and click Connect next to Buy Buttons. You will need to be logged in as the store owner to install the app.

Create Channel and Connect Buy Buttons

Scroll to the bottom of the page and click Install App, then click Confirm.

Install the Buy Buttons app.

 
 

Buy Button Settings

Buy Buttons app in the control panel

Product Variant

Choose a product to use with your new button. This can be a simple product or a specific variant of a product with options. A product must have a SKU assigned to use with Buy Buttons. If you select a product without a SKU, you'll be prompted to add one before continuing.

Button Type

  • Card — a rectangle or square-shaped card that features the product thumbnail photo, name, price, and a Buy Now button. Hovering over the photo will bring up a Learn More button, which will link the shopper directly to the full product details page. The Buy Now button behaves based on the Redirect To setting.
  • Button — a simple button that uses the product name as the label. The button behaves based on the Redirect To setting. The Button Text can be customized under Advanced Options.
  • Link — a simple URL that can be included/linked in an email, social media post, or direct message
 

Redirect To

  • Checkout (recommended) — adds the product to the cart and forwards the shopper to the checkout page
  • Cart — adds the product to the cart and forwards the shopper to the cart page
  • Product Detail Page — forwards the shopper to the product page
 

Note: If you create a button for a product with a required modifier option, the button will automatically redirect to the product detail page even if you have set up the button to direct to the cart or checkout. The customer must first choose a value for the required modifier option in order to add the product to the cart.

Source

Optionally add a source parameter to the generated Buy Button URL to track click information for affiliate or ad campaign reporting.

Theme

Choose from 6 preset styles, or select Custom.

When you select Custom, we'll save those settings in the browser for the next time you come back to the app. This means you can re-use the same custom settings over and over again, without having to remember them. To update your saved custom settings, make a change to your settings after selecting Custom.

Open In

This setting determines how a new page is opened when a shopper clicks the Buy Now button.

  • Popup Window (recommended) — opens the product/cart/checkout page in a new popup window. This leaves the page the shopper was on open in the background so they can easily return to what they were doing. Opening in a popup window is only available for card type buttons.
  • New tab — opens the page in a new browser tab in the same window. The page the shopper was on is still open in the original tab.
  • Same tab — opens the page in the currently active browser tab
 

Advanced Options

  • Button Text — text/label that appears on the button. By default, this is either Buy Now or the product name, depending on the Button Type.
  • Button Color — button background color. Click to select a color using the color picker or enter a hex, RGB, or HSL color value.
  • Title Color — product name color (Card Button Type)
  • Font — font style for product name, price, and button text
  • Overlay Text — text/label that appears when hovering over the product photo thumbnail. By default, this is Learn More. (Card Button Type)
  • Button Text Color — button foreground/label color
  • Price Color — price color (Card Button Type)
  • Google Analytics ID — add your Google Analytics ID to track page views. This only applies to card type buttons, and is not required if you connected Google Analytics using the recommended setup method. See the FAQ for more information.

Preview

This is a live preview of how your new button will look and behave. Click View Responsive Preview to see how your button will look in various common formats, such as banners, and in skyscraper and rectangle ad dimensions.

Get Code

When you're finished building your new button, click Get Code. This is the resulting HTML code for your new custom button. Click Copy and Paste to copy the code to your clipboard so it's ready to paste into the HTML source of your content, like a blog post or newsletter.

 
 

Creating a New Button

1. Click Choose. In the popup window that appears, use the search bar to search for your product. Each SKU associated with your product will be listed beneath it in search results. Pick a SKU for your button, then click Select.

Select Product Variant

2. Adjust the look and behavior of your button using the Buy Buttons Settings.

3. When you're done, click Get Code. The resulting generated HTML code for your new button is available for copy and paste. Click Copy and Paste to copy the code block to your clipboard.

Get Code

 
 

Buy Button Orders

Orders made from Buy Buttons appear with Buy Button as the order source in order details and order exports.

Order with a Buy Button order source

Buy Buttons orders can be selected as a Channel when searching for orders.

Orders from Buy Buttons highlighted as the Channel in an Advanced order search

Buy Button orders are included in the Channels View of the Store Performance report located on the control panel dashboard.

 
 

Using Your Buy Button

Buy Buttons enable you to reach potential shoppers over multiple media platforms, making it easy for them to purchase your highlighted items by directing them straight to your product or checkout pages. Once you have created your Buy Button code, you can make it available anywhere you can add HTML or a link, such as:

  • WordPress
  • Twitter
  • MailChimp
  • Landing Pages

Wordpress blog post featuring a Buy Button (card type)

 
 

FAQ

Is there any additional cost or extra fee for using Buy Buttons?

No; however, sales generated through Buy Buttons are counted in your store's GMV/sales. Increased sales/revenue could result in your store being automatically upgraded, depending on your current plan. See BigCommerce Pricing for more information.

Can I track Buy Button views and conversions with Google Analytics?

Yes, Buy Button tracking is already setup for you if you're using our Google Analytics Enhanced Ecommerce integration. This will allow you to track impressions (page views) from third-party sites and to see how well your Buy Buttons are converting.

Can I change the size of the Buy Button card?

Yes. You can manually adjust the width and height dimensions of the generated code.

<div class="bc-buy-button" id="bc-sku-SKU-130" style="width:295px;height:435px">