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 that 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.|
|If you scroll down even either, past the colours - 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 made 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 - in the example shown, for the Theme 'Mushi' - 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.
Common questions regarding Theme Customization
What browsers are supported?
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!
Why aren't my changes being applied?
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!