Using the custom HTML widget
Please take a look first, if your theme supports the custom HTML widget option (Note: Not all template has support for this. If yours do not have, please jump to the second part of this artice.)
Please follow the instructions from this video: https://www.youtube.com/watch?v=mbA9_FWhI_4&t=3s
If your template does support the custom HTML widget, it can happen that the last steps a little bit different.
1.This widget might be under the ADVANCED section, just like in this picture:
2.Your save button might be on the top right corner:
If you still cannot find the widget, you can add the recommender html straight into your template file.
How to add the recommender widgets straight into your template files
Disclaimer: By editing your own template files following this article, we cannot take responsibility for any harm caused to your site. Please edit your files with care. If you are not confident, please seek help of a Shopify theme developer or any web programmer who has the experience to help you.
If your template does not support the custom HTML widget, you still can add the recommender HTML, by editing your templates liquid files. Liquid is the extension name of your template files. If you want to learn more about them, you can read more at Shopify’s documentation about templates: https://shopify.dev/tutorials/develop-theme-getting-started
I know this is a lot of reading, that is why we created a simpler step by step list you can follow to edit your template files. This is not a golden rule, since each template is unique, but they all follow the same principles. You should be able to find the perfect spot for the recommendation widget.
Step 1.
First go to the admin page of the “Upsell Recommendation by AutoCommerce” widget.
Click on one of the “Edit” buttons, just as illustrated in the image below:
Copy the placement code and save it in a text file so you can come back to it easily when we edit your liquid files. That little code is an HTML code, that will hold the recommendation widget, wherever (on the supported pages) you place that. You can also just leave that page open to easily come back at any time.
Step 2.
On a second tab, you have to find where you want to place your recommendation widget on your website. Please note that we only support the following 3 types of pages.
- Home page (usually index.liquid)
- Product page (usually product.liquid)
- Cart page (usually cart.liquid)
We do not support these pages amongst others:
- Collection pages
- Blog pages
- Articles
- Cart widgets that pops up on the side of your product pages.
The file names can be called anything, but most templates are using these names. If you cannot find these, please try to find the liquid file you need. It can also happen that a liquid file uses another liquid file for a section on your page. If you have that special case, find the liquid file you need, regardless how it is called. Remember, you have the backup files if anything happens. Try and play 😊
If you decided which page you are going to edit, I will show you a little trick to make it easer to find the spot you are looking for.
When you find the perfect spot, you can use the browser inspector to find The ID or Class Name of an element. This text will help you to find the part of the code in the template where you should place your custom HTML for the recommendation widget.
Please, open your store’s homepage, product page or cart page. To make the browser inspector appear in Google Chrome push F12 on your keyboard. (If nothing would happen you can still try Ctrl + Shift + I on windows, or Command + Shift + I on a MacBook)
A third and simpler option is to simply right click on the element where you want to place your code on the website and click “Inspect”, just as in the picture below.
If you want finer control you can use the block selector arrow. Please make sure, that in the browser inspector you are in the “Elements” tab. If you are, click on the little arrow that is placed on the inspector window’s top left corner.
With that, whenever you click on an element (like an image, text, or button) on the webpage, the responsible code for the selected part will get highlighted in the code inspector.
In the image above, we clicked on the “BACK TO HOME PAGE” button, that has this code related to it: class=”text-center return-link-wrapper”
Try to copy the html text from the inspector and save it in a text editor, because you will soon need it.
When you go back to your template code editor, you can search for any of these texts in your liquid template file. With that you can “easily” find where you should paste your custom HTML for the recommender.
Step 3.
Please use the image below as your reference for the following instructions.
- In the admin side of your website, find your current theme. On the left find “Online Store”, select “Themes”.
- First download the template files so whatever goes wrong, you can always go back safely. If you find it simpler, you can duplicate your theme, and you can experiment with the copied template without causing any harm to your main theme. By clicking on the “Action button” chose either the “Duplicate” or “Download theme file” option. (I would recommend “Duplicate” since it is less hustle.)
- When you have your copy of your template you can select the “Edit code” option
Step 4.
After clicking on the “Edit code” button, you will be presented with the following (or very similar) page. Here we now have to find the liquid file responsible for the part of the website, where you want to place the recommendation widget.
On the left, you can see all of the template files are presented in a list. On top of that list you can use the search tool or you can scroll through the files to find the one you need. When you see a template file that you think is the good one, just click on it, and on the right its content will appear as code that you can edit.
In that text/code editor you can also search. If you cannot see the search bar, try the Ctrl +F (on Windows), or Command + F (on MacOS) keyboard combination.
If you followed through Step 2, you already have the html code of the selected part, where you want to place the recommender custom html (copied in Step 1).
Try to search for either the text that is unique on that page, like the BACK TO HOME PAGE text in our case, or try to use a part of the html that could be unique. Like an html id name or class names. In the example we use we could search for text-center return-link-wrapper, or just a single class name like: return-link-wrapper.
If you cannot find the text in the selected liquid files, it can mean 2 things:
- The selected code is in a different liquid file
- The selected code is coming from an other application installed through the app store, or it is your custom app, that your developer placed in your template (if you have a custom template)
If you cannot find the code at all, then try to find a different reference point (unique word on your page, different html class name or html id name) from your website and try again.
When you find the spot in the liquid file that you believe will be ok, just paste the HTML you copied from Step 1.
Press the “Save” button on the top right of your page, then you can click on the “Preview” button, or you can visit your website to see if you get the result you wanted.
If not
- You can go back to the file you edited
- Delete the HTML you placed in
- Save again to keep the changes
- Start over to find a new spot and save your custom recommender HTML.
- Repeat the process until you are done 😊