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.

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.

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.

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.

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.

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