1. Help Center
  2. Using integrations with B12

Adding a Shopify collection to your website

How to generate a Shopify collection embed code

Written by Jay Douglas
  • Adding Shopify as an integration to your website can be quick and easy, and allows your customers the ease and efficiency of making a purchase directly on your page. When you integrate products directly into your website, you keep customers on your website and increase the likelihood they will make a purchase.

  • To start, you must have a Shopify account. 

  • By the end of this article, you will have the HTML/embed code for a Shopify collection, which you can add to your website yourself, or send to hello@b12.io and we can make that update for you. 

1. Log in to your Shopify account. You will see your homepage dashboard. 

2. If you haven't already, add the Buy button channel to your Shopify account by following these instructions.

3. From your Shopify dashboard, click Products to open your products page.

4. Click Collections.
We recommend using a Collection to keep your products separate and organized. If you do not know how to make a collection, follow these instructions.

5. Click on the collection that you want to add to your website and then click Embed on a website.

6. Customize the options for your buttons and shopping cart widget.
We recommend using the View product details option for the Action-on-click, as well as incorporating your site's colors for the buttons and widget.
You can also customize other settings, like image size, fonts, and more!

7. Once you've customized your buttons, click on Generate code on the top right hand corner. 

8. Copy this code, and follow these instructions to add the integration yourself, or email hello@b12.io for us to make this update for you. 

If you want to make changes to your Collection and how it displays on your B12 site, you will have to do so through Shopify.

As you make updates to your Collection on Shopify, your B12 website will update automatically with the changes, so you only have to find this code once for each Collection.

If you'd like to customize it further, watch this short video!