tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 14: Theme Settings 1/2

Shopify Theme from Scratch Part 14: in this tutorial we’re going to be build the Theme Settings for our basic theme.


part14_banner

Today we’re going to start working on our Theme Settings form. Theme Settings is a page in the admin where storeowners can go in and make various changes to their storefront, such as: colour, font, logo image, etc. Theme designers can choose what is modifiable through the Theme Settings page through the settings.html file.

There are 6 types of theme settings that you can use:

  1. File upload
  2. Radio button
  3. Select dropdown
  4. Colour picker
  5. Checkbox
  6. Textbox/textarea

In Parts 14 and 15 of this tutorials series, we’ll set up a simple example for each of them.

Let’s gitter done eh!

Preface: How to reference Theme Settings variables in Liquid templates and stylesheets

The first thing we need to look at is how to actually use the Theme Settings in our Liquid templates. Theme Settings can be referenced by appending the name of the theme setting to the “settings” object in Liquid. For example, you may have a radio button in your Theme Settings that looks like this:


 Uploaded Image

Notice how the name attribute of the <input> is “logo_option”. Now, if we want to use this Theme Setting in our templates, we can do the following:


{{ settings.variable_name }}
// this will output "image" (i.e. the value of the input) if the radio button is selected when the Theme Settings are saved. 

You can use Theme Settings within if-statements and unless statements, as follows:


{% if settings.variable_name == "image" %}
     do stuff here 
{% endif %}

{% unless settings.variable_name == "image" %}
     do stuff here 
{% endunless %}


1. Change style.css to style.css.liquid

The cool thing is that you can access the settings object in CSS files as well. The only thing you have to do is append “.liquid” to the end of the CSS file.

In the Template Editor, open style.css. Click the Rename button and change its name to “style.css.liquid”.

rename_asset

Figure 14.1: Renaming the style.css file

You don’t need to change anything in the theme.liquid file where the style.css file is being called because the style.css.liquid file is already rendered as a normal CSS file when the theme.liquid file sees it.

2. Set up Fieldsets

Fieldsets are groups within in your Theme Settings that help organize your Theme Settings. We’re going to set up four fieldsets: Logo Settings, Font Settings, Home Page Settings, and Footer Settings.

In the Template Editor, open the settings.html file and delete everything that is in there now. Insert the following code:


Logo Settings
Font Settings
Home Page Settings
Footer Settings

Hit save. Go back to your Theme Settings page, and refresh your browser – you will now see four sections in your Theme Settings, one for each fieldset that we created.

theme settings fieldsets

Figure 14.2: Fieldsets help organize your Theme Settings page.

3. Logo Settings

Let’s start off by adding an input field that allows users to upload a logo image, as well as some radio buttons for selecting if a customer wants to use the uploaded image or just the shop name in plain text.

Open settings.html, and add the following code in red under the <fieldset> for Logo Settings.


Logo Settings
Uploaded Image Text
...

Refresh the Theme Settings page, and you will see a couple of new settings under Logo Settings.

logo settings

Figure 14.3: New logo settings

Click the Browse button and select an image on your computer. Select “Uploaded image” for the Logo option setting. Click the radio button for “Uploaded Image”, and hit Save.

Now, let’s go back to our Template Editor and add in the code to output the uploaded image. You’ll notice that the file that you just uploaded can be found in the Assets folder, and it will take on the name specified in the “name” attribute of the image upload setting (Figure 14.4).

logo png in template editor

Figure 14.4: ‘logo.png’ image image uploaded through the Theme Settings.

Open theme.liquid, and locate this line of code:


    

{{ shop.name }}

Replace the line of code above with the code in red below:


    

{% if settings.logo_option == "image" %} {{ shop.name }} {% else %} {{ shop.name }} {% endif %}

Hit Save. Go back to your storefront and refresh the page; you will now see the logo that you uploaded earlier in the header (Figure 14.5).

logo uploaded

Figure 14.5: Logo image from the Theme Settings can now be seen in the header!

If you go back to your Theme Settings, select the “Text” option for Logo option, then hit Save, your storefront will show the store name in plain text instead of the uploaded image.

4. Font Settings

Let’s now move on to the Font Settings fieldset. Open settings.html, and within the <fieldset> for Font Settings, add the following code in red:


...
         Uploaded Image
         Text
      
    
  


Font Settings

Note the two classes that we’re applying to each of the inputs: “font” and “color”. Applying these fonts to an input auto-generates values or outputs a special UI element.

Applying a class called “font” to an input creates a dropdown with pre-filled fonts:

theme settings class font

Figure 14.6: <input> with class “font”

Applying a class called “color” to an input creates a special UI element for picking a colour:

theme settings class colour

Figure 14.7: <input> with class “color”

There are three other special classes that auto-generate values in Theme Settings: linklist, collection and page. We will cover these in Part 15 :)

In your Theme Settings, go ahead and select a font and colour for Body font and Body font color, and hit Save.

Now, back in the Template Editor, open style.css.liquid and look for the selector for “body” (it should near the top).


/**** global css ****/

body{font-family:Arial, Helvetica, sans-serif;}
...

Replace the value for “font-family” with the following code in red.


/**** global css ****/

body{font-family: {{ settings.body_font }};}
...

This will make it so that the value of the selected font in the Theme Settings will be used for the body selector in our CSS file.

Next, let’s add the selected colour to our stylesheet. Add in the CSS code in red in the location specified below:


body{font-family: {{ settings.body_font }}; color: {{ settings.body_font_color }};}

Again, take notice at how the {{ settings._______ }} format, and how the variable’s name match up with the “name” attribute from the Theme Settings.

Refresh the page and you should see your selected font and font colour being reflected on your storefront (Figure 14.8).

theme settings part 14 complete

Figure 14.8: font and font colour settings in action!

We’ll take a break for now, and wrap up the rest of the Theme Settings in Part 15.

← Back to table of contents

6 Comments

  • Tracy
    Tracy on February 25th, 2015

    Thank you so much for doing this – I wonder if you could me with something, I’ve followed all your instructions and pretty much everything has worked fine, except that I can’t work out why my logo is not centred like your is.

    Could you help please?

    My store is https://tracymac-first-theme.myshopify.com

  • Ray
    Ray on May 18th, 2015

    I am trying to include a CSS file based on a condition in my settings. I tried;

    {% if setttings.slideshow_position %}

    {% endif %}

    But the CSS file was not included (it’s full name is “css-carousel.css.liquid”. I have also confirmed that “settings.slideshow_position” contains a value as I used “{{ settings.slideshow_position }}” as the first line following “” and the value is displayed on the page.

    Is there something wrong with my code?

  • Ray
    Ray on May 18th, 2015

    Note in the above comment the line to be included was not output as it contains HTML. The missing line (without the beginning and ending angle brackets) is;

    link href=”{{ ‘css-carousel.css’ | asset_url }}” rel=”stylesheet”

  • John
    John on July 28th, 2015

    Hey tetchi, tks for the tutorial. Went quite well until Part11 onwards from there on it was a little confusing simply because I could be using an updated interface where things could have changed around; I couldn’t locate Template Settings Page and could not progress forward. in Part 14, I couldn’t find ‘settings.html’ to edit.

    I was in the Windows environment and was using the default editor which may have partly contributed to the problem. I believe your tutorials were based on a Mac editor.

    Kindly give me some directions to move forward so as to complete the last 5 tutorial parts.

    Warm Regards,

  • Mike
    Mike on November 2nd, 2015

    Hi John,

    Parts 11-13 still work, if you delete the top line in each of the templates/customers/*.liquid files. This line is {% layout settings.customer_layout %}

    These final parts are trickier because the settings format has changed a lot in recent versions of Shopify. It no longer uses config/settings.html but instead uses config/settings_schema.json.

    Example: https://github.com/Shopify/Timber/blob/master/config/settings_schema.json
    Docs: https://docs.shopify.com/themes/theme-development/storefront-editor/settings-schema

  • Mike
    Mike on November 3rd, 2015

    So, I finished the tutorial while cross-referencing the updated Shopify docs. Here is the resulting settings_schema.json that corresponds to this tutorial:

    https://github.com/mikekuehn/tetchi-scratch-2015/blob/master/config/settings_schema.json

    Thx again Tetchi.

Post a comment