How to add 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

  1. Video tutorials by widgets
  2. Homepage 
  3. Specific page (home page, contacts, etc.)
  4. Adding a floating widget to all pages
  5. Adding your inline widget to all pages

BigCommerce Video Tutorials by widgets

Adding your widget to the homepage

1
Log in to your website's admin panel and go to Storefront section. When you select Storefront, you'll be automatically redirected to My Themes screen.
2
Open the homepage template file. Open the dropdown list in Advanced field, 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.

3
Paste the installation code. Add the installation code before the closing {{/partial}} tag and press Save & Apply File.

You have successfully added your widget to the homepage of your BigCommerce website.

Please, keep in mind that updating your site's theme will overwrite the code and you'll have to add it again. Unfortunately, this is the only way to add the code to the homepage

Adding your widget to a specific page (except for homepage)

Homepage is not displayed by default in the list of pages. You can set up a specific page, and make it display as your homepage, and in this case you'll see it in the list of pages. However, if you're using the default configuration, please, follow the instructions in the section above to display your widget.

1
Log in to your website's admin panel and open the list of available pages.
To do it, click on Storefront and select Web Pages
2
Open HTML editor of the target page.
Cliсk on the name of the page in the list to open its editor, and then press  HTML button to open the page's HTML editor
3
Paste the installation code
Paste the widget's code to HTML Source Editor window and press Update

Press Save & Exit

You have successfully added the widget to a page of your BigCommerce website!

Adding a floating widget to all pages

This installation scenario is for the widgets that don't have a specific position on your page. If you need to install a chat widget, Age Verification or Popup, please, follow the instructions below.

1
Log  in to your website's admin panel and go to Storefront section. When you select Storefront, you'll be automatically redirected to My Themes screen.
2
Open the homepage template file. Open the dropdown list in Advanced field, 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 templates files.

3
Paste the installation code. Open base.html template, add the installation code before the closing </body tag and press Save & Apply File.

Adding your inline widget to all pages

Please, keep in mind that updating your site's theme will overwrite the code and you'll have to add it again. Unfortunately, this is the only way to add the code to all pages.

1
Log in to your website's admin panel and go to Storefront section - My Themes. Open the dropdown list in Advanced field, and select Edit Theme Files. The templates list will open in a new tab.
2
Find Page.html file in Templates folder
Find Page.html file in the list and click on it to open the file editor
3
Paste the widget code.
Paste the widget code before the closing  {{/partial}} tag and press Save & apply file

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


If you have any questions left, please, feel free to contact our support team at https://help.elfsight.com/contact, we will be delighted to assist.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us