Adding Elfsight Widget to Shopify Website

Installing an Elfsight widget on your website is quick and easy! Just copy your widget installation code and let’s get started! 😊

This article covers installation for both Online Store 2.0 and Vintage themes. Not sure which theme you’re using? Check this page — if your theme is listed, you're using Online Store 2.0; if not, you're likely on a Vintage theme.

For Online Store 2.0 themes, watch our video tutorial or check the detailed guide below. For Vintage themes, just follow the step-by-step instructions in the article.

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:

Can't find the custom liquid section in your list? Follow this step-by-step guide to add it manually. Once you're done, return to this article to continue installing the widget.

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:

All done! Your widget has been added to the page.

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 the 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:

All done! Your widget has been added to all pages.

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 on all product pages of your Shopify website!

Need help with installation? 🙌 Send a request, and we’ll set it up for you. If anything’s unclear or missing, share your feedback in our forum! Your input helps us improve.