How to add an Elfsight widget to the homepage of your BigCommerce website

Share
Display your fantastic Elfsight Apps widget right on your homepage

Where to find your widget installation code

First things first, so let’s find out where to get the installation code for your widget.

There are two ways to start using Elfsight Apps – either to download the app extension from BigCommerce Apps Marketplace, or to create your widget directly in our Elfsight Apps service. However, with both ways the process is the same – first you need to create and save your widget, and after you do it, you’ll be redirected to widgets’ list screen:

Click on Add to Website, and you’ll see the popup window with two lines of code. These lines are the installation code for your widget:

Now that we know how to get the installation code let’s move on to the installation process as such.

Adding your Elfsight Widget to the homepage

Displaying the widget on the homepage is one of the most common use- cases. Let’s see how it can be done, using Instagram Feed widget as an example.

Click on Storefront to go to your theme files section.

Once there, you need to find the section where you can edit the theme files – Advanced Options of your theme, Edit HTML/CSS section:

You’ll be redirected to template files list. Please, click on default.html file:

Add the installation code to the Default file. Let’s say that we need to display the widget right before the footer. In this case we need to add it before the PanelFooter class in the code. In the same way you can choose any page area to display the widget. Press Save after adding the code:

Now you can refresh your webpage and check the widget on your website:

Test the featured widget in our online demo!

Check all features and find out the coolest look of the Instagram Feed on your website.