BigCommerce

This tutorial shows couple of different methods of how to add Instagram widget to your BigCommerce store.

Step by step instructions for Page Builder

This tutorial does not show how to create and configure BigCommerce store from scratch. We assume that you already have working installation of BigCommerce. If you need help with basic configuration of your BigCommerce website we suggest reading BigCommerce – Getting started article.

Step 1 – login to your BigCommerce store

Screenshot showing BigCommerce login screen

Start with logging in to your BigCommerce store. Make sure that your user has permissions to edit store settings.

Step 2 – launch Page Builder

Screenshot showing Customize button that launches Page Builder.

From the menu on the left side of your screen select Storefront and My Themes.

You should see list of available themes. Click Customize button under Current Theme section. It will launch Page Builder.

Step 3 – add HTML widget

Screenshot showing location of HTML widget in Page Builder.

From the drop-down list select page where you want to add our widget. In our case it is Frontpage.

Select Widgets icon from the left menu. In Page Builder drag HTML widget from Basic section and drop it onto your page where you want to add the widget. Places where you can drop HTML widget are marked with Drag and drop widgets here text.

Step 4 – paste your widget embed code

Screenshot showing our widget embed code inserted into HTML widget.

Once you’ll drop the HTML widget onto your page on the left side of the screen you should see default HTML content. Remove it and paste your widget embed code into the new field. Click Save HTML button.

If you don’t know where to find your widget embed code, please read this tutorial – where can I find my widget embed code?

Step 5 – save changes to your design

Screenshot showing Save button in Page Builder.

Once you are happy with how you page looks like click Save button in top right corner. Congratulations! You just added Instagram widget to your BigCommerce store!

Screenshot showing our widget embedded on frontpage.

Step by step instructions for Web Pages and blogs

If your BigCommerce theme does not support page builder or for instance you want to add the widget into one of your BigCommerce Web Pages or Blog posts, this is alternative way of embedding the widget.

Step 1 – login to your BigCommerce website

Screenshot of login screen from BigCommerce website.

Just like in method with Page Builder you need to be logged in to your BigCommerce store.

Step 2 – Create new script

Screenshot showing button to create new script in BigCommerce website.

BigCommerce by default strips certain attributes from iframe elements like border or hiding scrollbars that we have in our widget embed code. This happens only when you try to paste the widget code in content editor in Web Pages or Blog posts. It does not affect Page Builder described in previous method.

In order to fix that you need to add custom script that will fix stripped tags.

From the menu on the left side of the screen select Storefront and Script Manager. Please click Create a Script button located near the right side of your screen.

Step 3 – configure new script

Image shows new BigCommerce script configuration.

There are couple of fields that you need to fill on the new script page:

  • Name of script – you can enter any value you want. In our case it’s LightWidget Instagram widget.
  • Description – you can provide any description you want. In our case it’s Script for fixing LightWidget on BigCommerce store.
  • Location on page – select Footer.
  • Select pages where script will be added – select All pages.
  • Script category – select Essential. Functional category would be better but the scripts are loaded differently when you select this category.
  • Script type – select Script.
  • Script contents – copy and paste code from below:
<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
<script>[].forEach.call(document.querySelectorAll('iframe[src*="lightwidget.com"]'),function(t){t.removeAttribute("width"),t.removeAttribute("height"),t.setAttribute("scrolling","no"),t.setAttribute("allowtransparency","true"),t.setAttribute("style","width:100%;border:0;overflow:hidden;")});</script>

Click Save button on the bottom of the page to save changes. What this script does is basically restore all attributes that are stripped by BigCommerce.

Step 4 – add widget to Web Page or Blog

Screenshot showing BigCommerce editor in HTML mode and our widget embed code

Edit Web Page or Blog post where you want to add Instagram widget. From the left menu select Web Pages or Blog and click the Page Name or Title to edit given post.

In Body section click the HTML button to change from visual to HTML code view. Paste your widget embed code to place where you want to add our widget and click Update button.

If you don’t know where to find your widget embed code, please read this tutorial – where can I find my widget embed code?

Congratulations, you just added Instagram widget to your website using alternative way!

Comments (0)

You must be logged in to post comments.