Buy Buttons

The Buy Buttons app helps 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

Buy buttons can be sized to fit specific dimensions (card types) and can be customized to reflect your business's colors and brand.

Advanced users can also integrate Google Analytics to track views and conversions.

Install the Buy Buttons App

1. Go to Channel ManagerBuy Buttons.

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

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

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! You have to change a setting after selecting Custom for it to save over the previous settings.

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. You should use the same ID that your BigCommerce store uses. Only applies to card type buttons. See more about Tracking Impressions with Google Analytics.

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 add formats (e.g. banner, skyscraper, rectangle).

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 source of your content (e.g. blog post, 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

Examples of Buy Buttons

Blog (Wordpress)

Create a new post and click the Text or HTML tab. Paste in your copied button code and use the code button to add opening <code> and closing </code> tags before and after your code block.

Wordpress post with the TEXT button, code button, opening and closing <code> tags, and buy button code highlighted

When you're done, publish your post and view it on your blog.

Wordpress blog post featuring a Buy Button (card type)

Tracking Impressions with Google Analytics (Card Type)

You can add your Google Analytics ID to your Buy Button cards to track impressions (page views) from third-party sites and to see how well they are converting. You should use the same tracking ID as your BigCommerce store. You can add Google Analytics tracking information only to card type buttons.

1. Locate your Google Analytics ID (tracking ID).

2. Enter your tracking ID intro the Google Analytics ID field when creating a button. You'll only need the part after UA-. For example, if your ID is UA-000000-01, you'll just enter 000000-01 in the box.

Google Analytics ID field in Advanced Options

3. Once you're done creating your button, you'll need to make some changes to your Google Analytics Universal Tracking Code. Find the following line in your code.

ga('create', 'UA-XXXXXXX-Y', 'domain.com');
 

Where's my Google Analytics code? See Setting Up Google Analytics for help finding your code in BigCommerce.

4. Make the following changes to the code. (The changes you need are bold and red).

ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['ad.buybutton.store'] );

5. Save your code. Your code should resemble the before and after examples below:

Before and after modifying Google Analytics code to work with Buy Buttons

You should now be able to see pageviews in Google Analytics any time the Buy Button is viewed on a website. Try it out! The Google Analytics "Real Time" view is helpful for confirming your new button is tracking correctly.

FAQ

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 BLU" style="width:295px;height:435px">
 

Additional Resources

Was this article helpful?