How to add an Elfsight app to your Shopify product page

Share
This article explains how to add an Elfsight app to a Shopify website product page

Where to find your widget installation code

After you download one of Elfsight apps from the Shopify app marketplace and press Accept Charges, you’ll have to create and save your first widget. After you save it, you’ll get the installation code that you need to add to your Shopify webpage to make the widget display.

To get the code, go to Apps section of your Shopify admin panel, and click on the name of the app in the list:

You will get to the app’s editor with the list of widgets. Please, click Install to get to the installation screen:

Once there, you need to click on the installation code in the grey box to copy it:

Now that you’ve copied the code, you can go ahead and install the widget. There are two ways to install the widget to your Shopify home page – the easier way is to install the widget via the visual editor and the harder way is to add it directly to the code. So let’s take a look at the installation process in detail.

Option 1 – Installing your widget via the visual editor

Go to Online Store and press Customize to edit the site’s theme.

Select the right page from the pages list on top of the page:

Click on Edit this page and you’ll be redirected to the page editor. Switch the editor to HTML mode by pressing Show HTML, paste the code and save the changes:

Check out the feed on your homepage!

Option 2 – Installing your widget by adding it directly to the code

Go to Online Store, press Actions and select Edit Code.

Select product page template from the list of templates. The name of the template might differ from one theme to another, but most likely it will be called product.liquid.

Click on the template’s name and insert the installation code onto the page that opens, to the area where you need to display the widget: