Minimal theme: Customising your store's design

From Spiffy Stores Knowledge Base

The minimal theme design can be edited in the "Design >> Theme editor" section of your toolbox. The Theme Editor allows you to edit just about every colour in your theme, as well as editing your slideshow and enabling or disabling social media functionality. Below is a guide detailing each of the sections in the theme editor;

PLEASE NOTE: THE MINIMAL THEME HAS BEEN UPDATED WITH NEW FUNCTIONALITY AND MOBILE COMPATIBILITY. WE ARE IN THE PROCESS OF UPDATING THIS DOCUMENTATION.

Theme presets

Minimal theme editor 01.png

The minimal theme comes with 6 preset colour schemes. When you first load the theme, it is loaded using the "White & grey" colour scheme. You can choose a colour scheme in this section, or you could also modify each section of your theme by editing other sections below.

The theme editor

Minimal theme editor 02.png

The theme editor is broken up into sections to make it a litle easier to find things.  Each section of the theme editor is devoted to either a specific set of functions, or a specific area of the page.  Clicking on a section heading will expand the section out so you can see the options for that section. We'll go into more detail about each section below.

Important note:
When you make a change in your theme editor, make sure you have a look at your storefront to see the result. You may need to click the refresh/reload button on your browser whilst holding down the shift key on your keyboard to see your changes, as they are sometimes cached by your computer.



Store header & navigation

Minimal theme editor 03.png

This section allows you to upload your logo, so that it displays in the header of your theme, and also on your checkout page.  To upload your logo, you tick the box that says "Use a logo?", and then click the "Choose file" button to select the file on your computer.  When you've done that, you just click the "Save settings" button to upload your logo and have it display in your theme. aPlease note that the theme editor re-sizes your logo to a maximum size of 750 pixels wide x 150 pixels high so that it fits into the theme nicely.  If you need that modified, please contact us to request a change to this.

You can also choose the menu that you want to appear in the header of your page.  The menus that appear in this list are ones that have been created in the "Store menus" section of your toolbox. The theme default is the "Main Menu". So when editing your menus, the Main Menu is the one you want to edit.

The menu in your store header supports multi-level drop-down menus, so you can create new menu items that appear when you hover over items in the top of the tree.  For more information about editing your store's menus, go to the "How to edit your store menus" page in this knowledge base.


Home page slide show

Minimal theme editor 04.png

The minimal theme has a slideshow on the home page, that can dispay up to 5 images.  To customise the slideshow, you first choose how many images you want in your slideshow, choose the images you want to upload, and then click the "Save settings" button.  

Any images you upload are automatially resized to fit the slideshow, so you will want to ensure that you upload images that are exactly 960px wide x 400px high so they don't appear stretched or squashed.

If you need help customising your slideshow, please contact us at support@spiffystores.com.au

Using Pixlr to create a slideshow image

Pixlr is a free online image editing program, where you can edit your images in your web browser.

  1. Go to the Pixlr editor
  2. Click "Create a new image"
  3. Set the width to 960 and the height to 400, and click OK
  4. You now have your canvas to work within. You will need to explore the various tools and options. You can open your own images in Pixlr using "File -> Open image" in the Pixlr menu. You can then copy and paste your images into your slide.
  5. When your slide is looking gorgeous, save it by choosing "File -> Save" from the Pixlr top menu.
  6. Choose JPEG for your format, and set your quality to 80
  7. When you've saved the file to your computer, upload it in your Theme Editor.



Site colour scheme

Minimal theme editor 05.png

Apart from the built-in colour schemes, you can also cusomtise all of the colours in your store. There are a lot of little changes you may want to make here to get your store looking the way you want it, so we suggest you experiment with this section to see what happens when you change things.

It's best if you keep your page background as either a light or a dark colour (as opposed to mid-range) to ensure that there's enough contrast to read your text.

Site footer: Address & payment details

Minimal theme editor 06.png

This section is pretty self-explanatory.  Edit the address details here that are displayed in your footer, and choose which payment methods you accept in your store.  If you accept PayPal, you should generally tick "PayPal", "Visa", "Mastercard" and "Bank Deposit", as all of those payment methods are accepted when you use PayPal.


Site footer: Social media & marketing

Minimal theme editor 07.png

The minimal theme also has a lot of social media functionality built-in.  Adding links to your Facebook page, Twitter page, an email subscribe form, and an RSS link to your blog are all good ways to ensure return visits to your store.  You'll also need the content to back that up though!


Enabling Disqus blog comments, Facebook "Like" buttons, and Twitter "Tweet" buttons

Minimal theme editor 08.png

The minimal theme will by default display a Facebook "Like" button, and a Twitter "Tweet" button on product pages, and blog articles in your store.

In addition, you can also enable comments on your Blog articles to encourage involvement from your visitors.  To do this, you will need to sign up for a Disqus account.  Part of the process of signing up with Disqus is to create a "Forum shortname", which needs to be added in this section for Blog comments to work.

Please note that you should be careful with the settings in your Disqus account, and ensure that you accept comments from people "Registered only with verified email" (found in the settings section of your Disqus admin panel)... otherwise your store will be filled with spammy comments in no time.  You also shoudln't enable comments until you've added you domain name to your store, and provided that domain to Disqus, otherwise disqus could become confused about which domain your store is operating on, and will cease to display comments altogether.


SEO (Search Engine Optimisation) for your home page

Minimal theme editor 09.png

This section overrides the default Title and Description meta tags on the home page of your store.