Adding your Instagram, Facebook or Twitter widget to your BigCommerce store is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your store.
Please note!
You can also make use of Shoppable items in your Instagram feed.
What do we mean by Shoppable?
Shoppable items in your widget allow your customer to go directly to the page where they can shop the item(s) marked as Shoppable. This makes it so much easier for your customer and should increase your sales if applied properly.
Have a look at Shoppable items for more information regarding Shoppable items.
Let's start adding your widget.
Log in to your BigCommerce store, go to your Dashboard and click on Storefront.
Click on Themes.
Click on Customize to modify the current theme.
To demonstrate the process of inserting your widget scripts, we have created 2 Web Pages. You use the same process to add your script to any page (or blog post) in your BigCommerce store.
On the Page Builder page, select the page you want to add your script to. For this part of the tutorial we will use the Grid Display page.
The selected page will then be displayed in the Page Builder.
The page consists of the BigCommerce available widgets in the left sidebar and the actual webpage in the main edit area. The web page consists of Global regions and page specific regions.
Anything added to the Global regions will be appear on all pages of your store.
For this tutorial we will only add the script to the page opened in the Page Builder, therefore we could add the Snapwidget script to anyone of the other regions, i.e. the region above the bread crumbs or below the page title.
Or
Drag the HTML widget to one of these regions
The editor will indicate that you can use this widget to add your Custom HTML (your widget script) to the region.
The left sidebar will now display an HTML editor where you can insert your script.
To make adding your script easier, click on the Expand HTML Editor button. This will expand the editor to full page. The HTML code for the message displayed in the previous image will be displayed as default.
Clear this code and insert your script.
Click on Save HTML to save your edit and return to the Page Builder.
Your widget will now be displayed on the Page Builder preview. If you want to see how it will be displayed on your live store, click on the Preview button at the top of the page.
Clicking on one of the images in the grid will display the image in a Lightbox.
You can also preview how you page will be displayed on other format devices such a smart phones and tablets by selecting the appropriate button in the top menu. This indicates that the widget displays responsive with the changes we have made.
If you are happy with the result, click on the Save button and then Publish your page.
In our example, the widget is displayed at 100% of the available area width on your page. We can reduce the width of the displayed widget by changing the iframe width in our script. If we would change the width to e.g. 75% then the preview will display the widget a lot smaller but left justified. Keep in mind that if you reduce the width too much then the social media buttons on your images won’t be displayed and you won’t be able to click on an image to display it in a Lightbox.
If this is the way you want it you can save your page and Publish it.
If you wish to display the widget center justified we will have to make some changes to the script code.
Change the iframe width back to 100% and encapsulate the iframe part of the widget script code with a <div> </div> tag.
You can now set the width of your widget by changing the width setting of the <div> style, e.g. 50%
Adding your Slideshow display widget
The process of adding the Slideshow Display widget is the same as for the Grid Display widget. The major difference that we will address is the fact that the grid contains more than one static image and the Slideshow Display displays only 1 image at a time. The factors mentioned for the Grid Display such as size and justification need a different set of modifications.
Select the Slideshow Display page to open in the Page Builder.
Drag the HTML widget to the region beneath the page title (same as for the Grid Display)
Insert your Responsive widget.
If you add your standard responsive SlideShow widget to your page, it will be displayed as follows.
The widget will be displayed at 100% and left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. If this is what you want just skip the next steps.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them e.g. to 200px each. Although the thumbnail size (in px) is important because it will be used in the iframe width and height setting in your snippet, you can change this in the snippet itself. This change will then only be applicable to this BigCommerce instance of your widget. If you use your widget on any other website (CMS, E-Commerce or Blog) it will still utilize the Thumbnail setting as set up on your SnapWidget dashboard
We are going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following:
With the iframe width and height setting to 200px, your widget will be displayed as follows.
The layout is the same as with the Responsive widget, but the size is as set by the width and height (in px) of the non-Responsive widget.
Make the following changes to the snippet.
Add 2 <div> areas with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you can actually leave them out).
<div id=”Wrapper” style=”width: 35%; margin: 0 auto;”>
This sets the Wrapper to 35% of available width and center-justified. With this width setting we can change the width of the snippet to any width we want but please note that if you make the width < 35% the social media buttons won’t be displayed properly on the images.
<div id="Container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">
This sets the area used to display the iframe at 100% of the Wrapper width as well as height = 100% of the width.
Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;)
This will then display the widget as follows with the ‘Wrapper’ width set to 35%. The widget will also be responsive.
Clicking on one of the images displayed in the SlideShow will display that specific images in a Lightbox display.
