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

Share
Find out how to display your Elfsight Apps widget in your website’s header

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 header

Displaying a widget in the header is a rare installation case, as most often the widgets are placed in the body of the page, or in the footer. However, with some apps, such as Countdown Timer, PayPal Button or Social Media Icons header is one of the most appropriate options.

So let’s follow the installation steps with Countdown Timer app as an example.

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

Add the installation code to the Header file. Let’s say that we need to display the widget before the header menu. In this case we need to add it before the PageMenu class in the header code. In the same way you can choose any header part to display the widget. Press Save after adding the code:

And now refresh your website page and check out the widget in the header:

Check out the settings of the featured widget!

Check all features and find out the coolest look of the Countdown Timer on your website.