With HTML/CSS customisation (available on selected paid plans), you now have the ability to add a custom Favicon to your store. To do so, follow these steps:
1. Visit the Advanced HTML/CSS section.
You'll find this in your SupaDupa store backend, from the 'Design' tab.
The 'Advanced Customisation' section can then be entered by clicking the '{..}' icon, at the top left, positioned next to the paint brush icon.
2. Upload your Favicon using the custom assets uploader.
Scroll down the left hand side from the advanced customisation to find the 'custom assets' block. Use the upload button to upload your Favicon to the SupaDupa servers.
3. Open the 'theme' template by clicking on the word 'theme' from the list of templates, and paste the following line into the template, after the opening <head> tag:
<link rel="icon" type="image/ico" href="{{ 'YOUR_FAVICON' | asset_url }}"/>
To clarify, once you have clicked the 'theme' template, the code loads on the right hand side. Where you see the line that says <head>, simply paste the above code onto the line below it.
4. Replace the 'YOUR_FAVICON' placeholder in the code snippet above, with the filename of the file you uploaded. To do this, remove the text 'Your Favicon' and then click the favicon custom asset you just uploaded - this will automatically place the code required to load the image into the code. The final result should look something like this:
<link rel="icon" type="image/ico" href="{{ 'favicon.ico' | asset_url }}"/>
Notice that, instead of having to click the custom asset, you can just copy the filename and enter it into the quotes as shown above.
5. Save your theme and apply!
Should you require further assistance, please write in using the contact form.
Written by Guy Schragger
Updated over 2 years ago