Adding Elfsight widget to Shopify website

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

In case you use Elfsight app from Shopify App Store, follow this article to find out how to install the widget — Installing Elfsight apps from Shopify App Store.

This article contains installation tutorials for new Online Store 2.0 Shopify themes and legacy Vintage themes. In case you don't know which theme architecture you're using, please visit this page. Your theme is on the list? Then you're using an Online Store 2.0 theme! In case you haven't found it there, your website is built on one of Vintage themes.

Specific Page

Online Store 2.0

1

Open your website's visual editor.
Log in to your Shopify admin panel and go to Sales Channels → Online Store:

Click the Customize button:

2

Add Custom Liquid section to the target page
When you go to visual editor, the home page is opened by default. To select another page, find it in the dropdown list at the top of the page.

To install the widget, click Add Section:

Then choose Custom Liquid from the list:

3

Paste the installation code
Paste the widget installation code to the Custom Liquid field. You can also change the Color scheme and set Top/Bottom paddings if needed. After this, Save the changes:

Vintage Themes

Vintage themes are all Shopify themes that use the previous architecture, which was replaced by Online Store 2.0 in July 2021. 

1

Open your website's visual editor.
Log in to your Shopify website's backend, go to Online Store → Themes and select Customize:

2

Add Custom Content section to the target page
When you go to visual editor, the home page is opened by default. To select another page, find it in the dropdown list at the top of the page.

To install the widget, click Add Section:

Then choose the Custom Content section from the list:

3

Paste the installation code
If needed, click on extra sections of the Custom Content block and click the Remove block button: Press the Add Block button and choose the Custom HTML option: Paste the widget installation code to the HTML field, set the Container width to 100%, and Save the changes:

Done! You have successfully added your Elfsight widget to a specific page of your Shopify website!

All pages

1

Open your the Online Store page.
In case you're using Online Store 2.0 theme, go to Sales Channels → Online Store:

In case you're using Vintage themes, the ones prior to Online Store 2.0, you can find it in the left-side menu: Click on the ... button and choose Edit Code:

2

Open the theme template
Select the theme.liquid file in the Layout section:

3

Paste the installation code
Paste the widget installation code before the closing </ body> tag and Save the changes:

Product Pages

Online Store 2.0

In this section, we're going to describe how to add Elfsight widget to the product's description and to all product pages. In case you're using one of the older Vintage themes and want to install the widget on a product page, please contact our Support Team.

Choose the placement:

1. Description of the product
2. All product pages

Adding your widget to the product description

The first method will suit you if you'd like to install the widget to the description section of your product or if your widget is a floating/popup one.

1

Go to the Products page
Log in to your Shopify website's backend, go to Products and select the page where you’d like to add the widget:

2

Add the widget
Get to the HTML editor of the Description by clicking on the </> icon, paste the installation code there and Save the changes:

Well done! You've added the widget to your Shopify product page's description.

Here's where your widget will display:

Adding your widget to all product pages

Here we explain how to add a widget to all product pages.

1

Open the Online Store page
In case you're using Online Store 2.0 theme, go to  Sales Channels → Online Store:

Click on the  ... button and choose Edit Code:

2

Open the theme template
Next, go to Sections →  main-product.liquid file:

3

Paste the installation code
Find the place where you want to display the widget, paste the widget installation code there, and save the changes:

Fantastic! You have installed your Elfsight widget to all pages of your Shopify website!