Using HTML Tag Location Mode

How to use HTML Tag mode integration for your widgets.

Jameela G avatar
Written by Jameela G
Updated over a week ago

View this video on how to use HTML mode

You should be familiar with HTML and editing your store's code before following this guide. If you're not, please as us for help.

HTML tag mode works by editing your website files and adding the HTML tag code snippet into your site's code in the location of your choice.

1. Go to the Location tab

Start off by going to the widget editor's location tab (the default location mode is Automatic).

Under the Location tab, in the Store Section arera press CHANGE

2. Select HTML Tag Mode

Fera gives you three options of how you want to choose a location for your widget.

They are ordered left to right from easy to advanced.

Select the HTML Tag option

3. Copy code snippet

Make sure you copy the code snippet. This is what you will be pasting into your website's code in the location you want the widget to appear.

Where to find the HTML Tag Instructions

4. Open your store's theme editor in a new tab

Once your Shopify store is open in a new tab, inspect the page.

Scroll down to the spot on your website where you want the widget to appear.

When you find the correct div id for the section, hover over it and it will highlight the corresponding section on your website to verify the correct location.

Since I want the widget to be placed above my newsletter section, I'm going to look for the div snippet of code that represents that newsletter section.

What the inspect mode looks like in your browser

5. Open your Shopify store dashboard

Once in your dashboard, go to Online Store > widget editor's location tab.

Click the Actions button and select from the drop-down.

Select Edit Code

6. Paste code snippet in the code editor

Search for the file name that you detected in step #4.

Once that file is found, open it.

Paste the code snippet copied earlier at the top of the HTML file.

Press the Save button.

Example editing of theme for Shopify stores. In this case we're adding the content to the top of the newsletter template file.

7. Head back to the Fera app

When you get back in the widget editor, press the refresh icon beside Status or click the Refresh icon on the preview browser (where your site appears).

When everything is correct, the status will say Found

Now the preview window will be updated and the widget will be in its new location!

Where the Found status will appear.

location found

8. Launch the widget!

If everything is to your liking, it's time to launch the widget to make it live on your eCommerce store. And that's it!

Now you know how to choose the location of your widget with Fera's HTML tag mode.

Widget not showing where you want it?

Let our support team know and we can almost certainly help!

Did this answer your question?