SupaDupa provides powerful methods of modifying the look and feel of your Theme - right down to being able to completely modify the HTML/CSS. The controls are grouped into two categories: Basic customization and Advanced customization. Basic controls require no technical skill - allowing you to modify the colours, fonts, banners, logos and more using simple controls from within your SupaDupa store back office. The Advanced customization gives you the ability to modify the HTML and CSS templates, allowing for a huge range of possibilities, giving you total control and the ability to paste in code snippets to enhance your store.
​
​

The basic controls allow you to modify the colours and fonts for a theme without needing to touch the code. 

Once you have selected a theme to edit, click the 'pencil' icon as shown in the screenshot above, to reach the Basic controls section for a theme. The controls load in the left hand sidebar, and changes can be immediately previewed on the right hand side. 

Note: if you would like to see your actual content in the right hand preview, click the 'Use demo content' toggle at the top left.
​

Now, if you scroll down the left hand sidebar, past the controls to modify the Logo and Banners, you'll reach the 'Appearance' section.

Here you'll see a list of placeholders which correspond to particular parts of the page, 'Body background' refers to the background for the whole page for example. To change the colour for a placeholder, simply click on it's name to reveal a colour picker, which you can use to select the desired colour.
​

Scrolling down past the appearance section - you'll reach the 'Fonts' controls which allows you to modify the size, line-height, font, style and other controls for various text components that appear within the theme. 

Here, you can click the first dropdown (that initially is set to 'Body Text' and choose which text you would like to modify the settings for. Having made your choice, proceed to make the formatting changes you require.
​

Finally, on some of our newer themes, if you scroll further past the Fonts section, you'll come across the 'Theme settings'. 

Now the settings available will vary from theme to theme; the example shown above is for the 'Mushi' Theme - you have the ability to modify the icons shown, the specific labels used across the theme and more. 

Once having made your changes, be sure to click 'Save' at the top left of the Page. The first time you customise a theme, you'll be prompted to give it a name - at which point the theme is now one of your themes - which can be updated anytime you like. 

​

 For those comfortable modifying HTML/CSS code, or know someone who is, you have the power to completely modify the underlying code to any theme - giving you complete control. You can also use the Advanced Customization controls to enter code snippets from third-party services. To access the templates, click the 'spanner' icon as shown in the screenshot above. This will then display a list of the CSS and HTML theme templates for the areas of your store - click on any to see the code on the right hand side. Be sure to save any changes you make by clicking the 'Save' button at the top left.
​

For this new functionality, we've had to compromise between providing a great experience for the majority, and supporting those on older browsers. For most part, we've leaned towards the former - and for this reason we strongly encourage using an up to date version of Chrome or Firefox. If you are having any troubles with the functionality, please try one of the mentioned browsers and be sure to get in touch if problems persist!
​ 

There is a difference between saving a theme, and applying it. Saving a new custom theme, and it will be visible from the 'My Themes' drop-down in the initial customization area, where all themes are listed. The drop-down initially says 'All Themes', click on this to reveal the 'My Themes' choice. From here, hover over the 'Preview' button and you'll see a button to apply the theme.
​ 
 We already have a few improvements we're looking to get out shortly, but it's there and ready - so go have a play! Have any questions or feedback? We'd love to hear from you!

Note that although you have the option to customise the HTML/CSS for any theme, the basic controls are only available for certain themes. These themes are marked with a yellow paint brush icon in its preview within the design section.