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.

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:

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 and 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.

Adding a floating widget to all pages

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:

Adding widget via Footer 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:

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:

Find the footer file
Go to the templates → components → common folder: Then scroll down and click on the footer.html file:

Paste the installation code
Open the footer.html file, add the installation code before the </footer> tag, and press Save & apply file:

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:

3

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 Elfsight widget to all pages of your BigCommerce website!