How to add BigCommerce with a Buy Button

Embed ecommerce products on your uSkinned Site Builder for Umbraco website with the BigCommerce Buy Buttons integration.

BigCommerce is a leading open SaaS and composable commerce platform that empowers brands and retailers of all sizes to build, innovate and grow businesses online.

There are various ways to implement headless ecommerce platforms on your website, including third-party providers such as Ecwid, Snipcart, FoxyCart, Stripe, PayPal, Shoprocket, Shopify and many more.

You can easily integrate your BigCommerce products into your uSkinned website using the BigCommerce Buy Button. This feature allows you to create embeddable product buttons that direct visitors to your product pages, helping you promote and sell directly from your site.

Here’s how to do it step-by-step:

Create a Buy Button in BigCommerce

Step 1

Before you can embed your products, you need to set up the Buy Button channel in BigCommerce — https://support.bigcommerce.com/s/article/Buy-Buttons-app.

Log in to your BigCommerce account.
Navigate to the Channel Manager in the BigCommerce dashboard.
Add the Buy Button channel to create embeddable versions of your products.

Step 2

After the channel is set up, you can create a Buy Button for any product you’re selling.

Go to the Buy Button section in your BigCommerce dashboard.
Select the product you want to promote (create a product first if you haven’t already).
Customise the button’s theme, style, and behaviour using the provided options.

Once you're happy with your Buy Button’s look and functionality, you’re ready to get the embed code.

Step 3

Once your Buy Button is set up and customised, follow these steps to copy the embed code:

Preview your Buy Button to ensure it looks the way you want.
When satisfied, click on the Get Code button.
Copy the provided HTML code snippet to your clipboard.

Add the Embed Code to uSkinned

Step 4

Now that you have your code, it's time to embed it on your uSkinned website.

Log in to your uSkinned Site Builder.
Choose the page or post where you'd like to display your product.
Add a new HTML block or section to the page.
Paste the embed code you copied from BigCommerce into the block.

Step 5

Once you’ve added the embed code to your chosen section, you’re ready to publish:

Save your changes.
Preview your page to ensure the Buy Button is displaying correctly.
When you’re happy with it, publish your page or post.

You’ve now successfully embedded your BigCommerce product into your uSkinned website. Visitors will be able to click on the Buy Button and purchase your products directly through your site.

#h5yr