All Collections
Design and customisation
How can I add a code snippet to my shop?
How can I add a code snippet to my shop?
Guy Schragger avatar
Written by Guy Schragger
Updated over a week ago

Whether you have a particular ad-tracking service you'd like to use, some custom text or image you'd like to include in the footer, a ratings system widget or any order type of addition that requires the inclusion of a code snippet within your page, this guide details to process to do so. You'll need to be somewhat comfortable editing HTML/CSS, but don't worry too much about making a mistake - we recommend saving HTML changes as a different theme so you can always switch back and revert your changes.

1. Log into your SupaDupa admin

2. Click on the spanner icon which is the third icon from the top left.
This section allows you to modify the HTML and CSS of your theme. See below:

Advanced customisation icon

3. From here, you need to decide if this code snippet is to appear on every page of your store, or a particular page (such as the homepage or your Info Pages). If the code snippet is required to be included within the '<head>' tag, then you'll need to place this within the 'theme' template. So to open the theme template, simply scroll down the left hand column and the 'theme' title under the templates list. See below:

4. This will now load the code for the 'theme' template on the right hand side. You'll notice the code begins with the <head> block of code, followed by the <body> (which is standard of HTML pages). Depending on where the code should be positioned, simply click with your cursor where you'd like the code pasted, hit enter to start a new line - then paste in the desired snippet. See below:

code snippet

5. Click 'Preview' seen on the left hand side to preview your changes if applicable. You may need to turn off the 'Use filler content' toggle so it becomes grey to view your code content, as opposed to the demo content. See below:

6. Finally, click the 'Save As Copy' toggle so it becomes green. See below:

If you're editing a theme that you have not already customised, you'll be prompted to give this theme a name.
This theme will then be visible from 'My Themes', a section you can access from the 'Design' section home.

7. If you'd like to immediately apply your changes, turn off the 'Save As Copy' toggle so it becomes grey. Where the changes will then be applied to your theme once you click Save changes. See below:

Save &amp; Apply

Should you require further assistance, contact us and we'll be happy to help.

Did this answer your question?