How to add an Elfsight Apps widget to the page template of your BigCommerce website

Share
Add your Elfsight Apps widget directly to your page template!

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 page template

Another very common use-case with our users is to add the widget to the website’s page template, to make it display on every page. Let’s take a Facebook Feed widget and find out how to do it.

To add the widget, first you need to find the section with your theme files. To do it, you need to click on Storefront menu item.

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 Page.html file:

Add the installation code to the Page 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:

After you’ve done this, you can click on any page on your website to make sure that the widget is displaying correctly:

Try Facebook Feed for free

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