Adding Elfsight widget to BigCommerce website

To add Elfsight widget to your BigCommerce website, you need the installation code. Here is an article that explains where to get it - Where to get Elfsight widget installation code.

In this article

This article explains how to install static and floating widgets. If you're unsure about the difference, check out this article - Floating and Static widgets: Understanding the difference.

Adding your widget to a specific page

There are two different ways of adding a widget to a specific page. Here they are:

  1. Adding widget via Page Builder
  2. Adding widget via Edit Theme Files

Adding widget via Page Builder

1
Log in to your website's admin panel and go to the Storefront section
When you select Storefront, you'll be automatically redirected to the Themes screen:
2
Open Page Builder
To see the Page Builder, click Customize:
3
Choose the page
Click on the dropdown menu at the top and choose the page where you'd like to install your widget:
Please note that the pages in your header menu are not always displayed in this dropdown. In case you don't see the needed pages, you need to install the widget through Edit Theme Files option.
4
Paste the installation code
Click on the HTML option and drag it to the place where you want to have your widget: Add your widget installation code to the opened field and click Save HTML:

Awesome! Your widget has been successfully added to the page on your BigCommerce site.

Need help? We're ready to assist you! 🙌 Send us a request, and we'll handle everything for you.

Adding widget via Edit Theme Files

1
Log in to your website's admin panel and go to the Storefront section
When you select Storefront, you'll be automatically redirected to the Themes screen:
2
Open the homepage template file
Click on the Advanced dropdown, and if it is necessary, create a copy of your theme by selecting Make a Copy. If you're okay with editing the current theme, select Edit Theme Files: You'll be redirected to the template file.
In case you don't see Edit Theme Files in the dropdown menu, you need to click Make a Copy and Apply it. Then the Edit Theme Files option will appear and you will be able to continue the installation process.
3
Find the needed page
Go to the templates → pages:

Find the needed file by its name:

4
Paste the installation code
Add the installation code before the closing {{/partial}} tag and press Save & apply file:

Nice! You have successfully added your widget to a specific page of your BigCommerce website.

Need any assistance? We're here to help! 🙌 Just send us a request, and we’ll take care of the rest.

Adding a floating widget to all pages

There are different ways of installing floating widgets to all pages. In this part of the article, we are going to show you two options:

  1. Adding widget via Base option
  2. Adding widget via Footer option
When installing the widget on all pages, the widget may not be added to the checkout page. In this case, the widget code needs to be added separately to the checkout.html file.

Adding widget via Base option

1
Log in to your website's admin panel and go to the Storefront section
When you select Storefront, you'll be automatically redirected to the Themes screen:
2
Open the homepage template file
Click on the Advanced dropdown, and if it is necessary, create a copy of your theme by selecting Make a Copy. If you're okay with editing the current theme, select Edit Theme Files:
3
Paste the installation code.
Find the base.html file in the templates → layout, add the installation code before the {{{footer.scripts}}} tag, and press Save & apply file:

Great job! Your floating Elfsight widget has been successfully added to all pages of your BigCommerce site!

Need help with a step? We're here to guide you! 🔧 Submit a quick request, and we'll take care of the setup for you.

1
Log in to your website's admin panel and go to the Storefront section
When you select Storefront, you'll be automatically redirected to the Themes screen:
2
Open the homepage template file
Click on the Advanced dropdown, and if it is necessary, create a copy of your theme by selecting Make a Copy. If you're okay with editing the current theme, select Edit Theme Files:
3
Find the footer file
Go to the templates → components → common folder: Then scroll down and click on the footer.html file:
4
Paste the installation code
Open the footer.html file, add the installation code before the </footer> tag, and press Save & apply file:

Well done! You have successfully added your floating Elfsight widget to all pages of your BigCommerce website!

Stuck at a step? Let us walk you through it! 🔧 Send us a quick request, and we’ll handle the setup for you.

Adding your inline widget to all pages

1
Log in to your website's admin panel and go to Storefront section

When you select Storefront, you'll be automatically redirected to the Themes screen:

2
Open the homepage template file
Click on the Advanced dropdown, and if it is necessary, create a copy of your theme by selecting Make a Copy. If you're okay with editing the current theme, select Edit Theme Files:
3
Find the body.html file in the templates folder
Go to templates → components → common and click on body.html to open the file editor:
4
Paste the widget code
Paste the widget code before the closing {{#block "page"}} {{/block}} tag and press Save & apply file:

Great! You have successfully added your inline widget to all pages of your BigCommerce website!

Stuck with installation? We're here to help! 🙌 Just reach out, and we’ll take care of the rest.

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us

Related Articles