Getting Started, Step 4 - Customise Theme

Click to go back to Step 3 of the Getting Started Guides.

 

Customise Theme

Note: to get to this section through the menu choose Menu > Customise > Theme Editor.

 

We’d recommend creating a colour palette from your logo for this section (as described in Step 1, under Menu > Settings > Store Settings > Logo). You might get the perfect colourway, or it may help as a starting point for your customisations.

Down the left hand side of the screen there are a set of controls that allow you to edit how your store’s theme looks. On the right is a real-time preview of the changes you make. The preview will load your homepage by default, but while editing your theme you can also navigate your site to see how changes affect other pages. For example, you could load a product page to see the change in the Product Price styling.

At any point you can Save your customisations using the Save link in the menu bar at the top left, or you can cancel without saving by clicking Exit.

Let’s start with Background. Click to expand the panel, revealing the current colour. Click on the circle to open the colour picker. If you created a palette from your logo you will see those colours at the bottom of the colour picker. Click on the colours to update the preview on the right. You can also manually select a colour by using the sliders, or by pasting in a hex code (e.g. #f1f1f1) to the text box. When you’re happy with the colour click the x in the upper-right corner of the colour picker to close it.

 

The next item in the list is Logotype. Please note that if you have uploaded a logo image then this will not apply. If you have not uploaded a logo then you can customise the appearance of your storename’s text. These same tips apply to all sections where you can edit text appearance.

 

  • Font and Style let you choose a typeface and its weight. There is a wide range of typefaces available to help set the character of your store. The styles you can choose from are Regular, Italic, Bold, and Bold Italic.
    (Note: we do not support custom fonts at this time. If that’s something that’s important to you and your brand let us know).
  • Clicking Size gives you a slider to adjust the size of the type. Drag the slider and release to update the preview.
  • Letterspacing evenly adjusts the gaps between letters. You may also have heard this referred to as ‘tracking’ in design software. Higher numbers give larger spaces.
  • Line Height adjusts the gap between each line of text. You may know this as ‘leading’ from other programs. A higher number will give a larger distance between lines.
  • Transform gives you the option to change the case of your text. The options are as follows:
    • None will leave the text exactly as you entered it, e.g. “This is my homepage”
    • Capitalise will add a capital letter to the start of each word, e.g. “This Is My Homepage”
    • Uppercase will change all letters to capitals, e.g. “THIS IS MY HOMEPAGE”
    • Lowercase will change all letters to lowercase, e.g. “this is my homepage”
    • Small Caps will change all letters to capitals, but anything that was typed as a capital letter will be larger than the rest of the text.
    • Colour - the colour picker behaves as described above in the Background section.

Logo Scale allows you to change the display size of the logo image, if you have uploaded one. This can be useful if you’ve added a large image and want to finetune its appearance. Use the slider to scale between 0% and 100% size.

Navigation edits the appearance of your store’s menu, and uses the same text controls as described above. It also adds controls for the Navigation text colour and Navigation text rollover colour. NOTE: Navigation link colours are separate from other link colours, which are found below under Links. This is to allow you to control your branding and user experience. If you do want to use the same colours for all links you can copy and paste the hex codes from the colour picker.

Page Titles, Sub Titles, Small Titles, Text, Product Title and Product Price all use the same text controls as described above. Make sure you look at a range of pages in the site preview to check how your changes look across your store.

Links controls the colour of all text links (except the navigation) and the Social network icon links. If you’ve generated a colour palette from your logo this is another place where it can be really useful. As a starting point for choosing colours try having different tones of the same colour for the Colour and Rollover Colour that are different enough to notice the change.

Buttons lets you choose the colours for your buttons and their text. When choosing colours make sure that there is enough contrast for the text to be readable. For example, if the text and button are both light greys and it’s difficult for customers to read they may go elsewhere. The primary button colours are used for the key button on each page. The secondary button colours are used in places like the Create an Account button on the login / join screen.

 

Select Design Details to amend the colour of design accents like the horizontal lines in the header and on collections. Adjusting the colour will also change the arrows in the breadcrumbs (e.g. Home > Collection > Product). By adjusting the Stroke Weight you can make the lines thicker or thinner, or make them disappear completely by setting the stroke width to zero.

When you’ve finished editing your theme click Save at the top of the page, then you can return to your Dashboard. Click the View My Store link in the menu or in the upper-right corner to take a look at your store - you’re open for business!

 

Initial setup is now complete! Go to Next Steps for suggestions on what to do next 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk