Working With Theme Settings

Let's click into the theme settings for the New Standard theme. Each theme has slightly different theme settings but if you get the basics of one then you will be able to figure out another. So in this chapter, we will take an in-depth look at the theme settings for the New Standard theme.


But before that, let's look at the different elements on the theme settings page. At the top left, there are buttons to: edit the theme in the template editor; rename the theme; and save the theme. We'll look at the template editor later in this chapter. It can be helpful to rename a theme to be clearer on which theme is which. I'm going to rename my theme "New Standard (Imposters)". On the left-hand side, you'll see a section "Live theme preview". Clicking the button Preview in new window will show you a live preview of the changes you are making before you have saved them.



Theme Presets

On the left-hand side, below the theme preview, you will see the section "Theme presets". Preset is short for preset style. As you know each theme can come with a number of styles. In the theme settings, these are known as presets. You can work with the theme preset that come with your theme but you can also create your own presets.

At the moment, we are looking at the "Slate" theme preset of the New Standard theme. If you click on the dropdown menu, you will see the other styles available for the theme you are looking at. In this case, for the New Standard theme there is only one preset so the only other option in the dropdown is "Custom". For other themes, the dropdown menu will offer a number of options.


On the right-hand side, you will find the settings for the theme, organized into a number of different sections. In the case of New Standard, there are sections for settings called: "General", "Style - Fonts", "Style - Colors", "Home", etc. When you open up the theme settings, all of these sections, apart from the first one, will be closed. Click on a section to open it up and view the settings within.



Saving current settings as a preset

As soon as you change a setting, the preset listed under "Theme presets" will change to "Custom" as you are diverging from the current preset. This protects the original presets so you don't overwrite them accidentally. If you click the Save button your changes will be saved as the "Custom" preset. The changes will also be made live on your storefront if you are editing the theme settings for the published theme.

It's a good idea, however, to create your own preset and then each time you make changes, save those changes to your preset. To do this:

  1. To the right of the Save button you'll notice a small triangle indicating that there is a menu available. Click on it to reveal the menu. Click on the option Save settings as a preset.
  2. On the dropdown menu that is revealed, choose either from the list of existing presets or select "a new preset" and specify a name for the preset in the text box.Click the Save button to save the preset.

You can always get back to one of the original presets or a preset of your own by selecting it in the dropdown menu under "Theme presets".



The Theme Settings Controls

No two themes have the same settings. Once you are familiar with the different types of settings and understand the terms being used for one theme, you'll see it's quite easy to work with another theme. Let's take a look at some of the settings that are common to many themes. We'll look at how they are done in New Standard.



Display Store Name Or Upload A Logo

Every store has either a store name or a logo on display. If you do not upload a logo then the store name will be displayed. In many themes the font used for the store name can be defined - we will come back to this a little later. To put in place a logo in the New Standard theme, follow these steps:

  1. In the "General" settings for the theme select the checkbox "Use Custom Logo".
  2. Select the file for the logo from your computer and click the Save button at the top left of the page. Your logo should be in one of the following formats: JPG, GIF or PNG.
  3. Click the View your website button in the navigation to see how your logo looks.

Each theme has slightly different constraints when it comes to the size of the logo allowed. Most themes will recommend an ideal size of logo for your theme - you can find this in the theme documentation. Visually it's best to use this ideal size as going beyond it your logo may be resized which is unlikely to look as good.