tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 15: Theme Settings 2/2

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


part15_banner

In the last part of the tutorial series, we’re going to wrap up the Theme Settings. We’ll finish up the two remaining fieldsets – Home Page Settings and Footer Settings.

Let’s giv’er!

1. Home Page Settings

We’re going to add a couple of dropdowns that allows the user to select which page and collection to display on the home page.

Inside the fieldset for Home Page Settings, insert the code in red below:


Home Page Settings

Notice the two classes that are being applied to the selects: “page” and “collection”. This will make it so that the dropdowns are pre-filled with the pages and collections of the shop, as seen in Figure 15.1 below.

home page 1

Figure 15.1: Dropdowns using the special class “page” and “collection”

Next we’ll tell the index.liquid template to load the page and collection selected in our new Theme Settings. Open index.liquid, and look for this line of code:


{% assign page = pages.frontpage %}

… and replace with:


{% assign page = pages.[settings.frontpage_homepage] %}

We’ll then add an if-statement that checks if any page has been selected. We do this by seeing if the value of page.handle is NOT blank (“”). Add the code in red below:


{% assign page = pages.[settings.frontpage_homepage] %}
{% if page.handle != "" %}

{{ page.title }}

{{ page.content }}
{% endif %}

Now let’s do the same for the selected collection. Look for the block of code below:


{% assign collection = collections.frontpage %}

{{ collection.title }}

{% for product in collection.products | limit:8 %} {% include 'product-loop' %} {% endfor %}

and replace with:


{% assign collection = collections.[settings.frontpage_collection] %}
{% if collection.handle != "" %}

{{ collection.title }}

{% for product in collections.[collection.handle].products | limit:8 %} {% include 'product-loop' %} {% endfor %}
{% endif %}

Now, if you go back to your Theme Settings and select a page and collection to show, you can select what page and collection you want to show on your homepage :)

homepage settings

Figure 15.2: The page and collection selected in the Theme Settings are now shown on the homepage

Finally, let’s add a select with custom options, for practice’s sake :). We’ll go ahead and add a dropdown that allows users to choose how many products they want to show on the homepage.

Open settings.html, and add the following code in red.


...
  
    
    
          
          
          
                                        
      
    
  

This will output a select dropdown with our own options (Figure 15.3).

number of products setting

Figure 15.3: Custom select dropdown for number of products

Now back in index.liquid, look for this line of code:


    {% for product in collections.[collection.handle].products | limit:8 %}

Replace the value for the “limit” with the theme setting variable, as shown below.


    {% for product in collections.[collection.handle].products | limit: settings.num_products %}

Now, on your homepage, you will see a maximum of 4, 8, 12 or 16 products depending on what you selected in the Theme Settings.

limit

Figure 15.4: The homepage now shows the number of products selected in the Theme Settings, as opposed to the hardcoded limit (8) that we had earlier.

2. Footer Settings

Let’s add some settings in our Footer Settings for showing/hiding social icons. To do this, we’ll use some checkboxes and a textfield, which are input types that we haven’t used yet :)

Start off by saving the three images below to your computer, and then uploading them to your Template Editor’s theme assets.

icon-twittericon-pinteresticon-fb

After uploading, make sure the icons can be found in your theme assets (Figure 15.5).

uploaded icons

Figure 15.5: The icons should be in the “assets” folder

Open settings.html. Under the fieldset for “Footer Settings”, add the code in red below.


Footer Settings

You will now see checkboxes for hiding/showing the icons, as well as a textbox for entering the URL of their respective pages. Go ahead and check the checkboxes, plug in some URLs for the icons, and hit Save.

social settings

Figure 15.6: Theme Settings for social icons

Let’s now add some code to output the icons. Open theme.liquid, and insert the code in red below:


  

There is an if statement that wraps the social icon images that checks if the checkbox for that particular is icon is selected. If it is checked, it will go ahead and output the icon. The icon is also wrapped with an anchor tag that has an attribute set to the value of the textbox for that icon.

You’ll now see the social icons in your footer.

footer icons

Figure 15.7: Social icons output in the footer

The End

That’s it that’s all! You now have a basic, fully-functional Shopify theme. I hope this was helpful and serves as a good basis for you to build your own kickass theme.

Cheers and thanks for reading!

Tetchi

← Back to table of contents

11 Comments

  • curtisaallen
    curtisaallen on December 27th, 2013

    Thanks for the tuts.

  • Toby Powell
    Toby Powell on April 4th, 2014

    Thanks so much for these tutorials, In 3 days, I’ve worked through all the 15 tutorials and gone from knowing absolutely nothing about shopify, to now feeling confident enough to go off and create my own theme! watch this space! thanks so much for the great tutorials

  • tetchi
    tetchi on April 6th, 2014

    Thanks for the kind words Toby, have a good one :)

  • Luke
    Luke on June 6th, 2014

    Thanks for all the tutorials, there were certainly loads there that I hadn’t seen before!

    good work sir!

  • Raj
    Raj on October 22nd, 2014

    Simply awesome – well written, easy to follow tutorial.

    I owe you a drink :-)

  • Gordon
    Gordon on February 1st, 2015

    Fantastic job on this tutorial!
    Very helpful and greatly expanded my understanding of liquid and the shopify customizing methods in general.

  • Tracy
    Tracy on February 25th, 2015

    Thanks so much for doing this, tetchi, I really appreciate all the work you’ve done on this. Where can I click to buy you a beer?

  • Joe
    Joe on February 27th, 2015

    Hey Tetsuro, thank you very much for your detailed step-by-step explanations and code samples. This is absolutely an invaluable tutorial. As a person who is trying to learn to code in Liquid, this the best and only detailed one I found around. I appreciate the time you put in. Cheers!

  • Jeannie
    Jeannie on February 28th, 2015

    Although Shopify has updated its site, I was able to follow your instructions fairly easily. However, I uploaded the three social icons through “Files” but they do not appear in my Assets menu. How do I get them there?
    I’m still trying to get my collections to appear in a drop down menu under catalog. Or show all the collections available to choose from on the catalog page.
    I notice that most of your other comments are somewhat old so I hope you are still moderating this site. Thanks for the tutorial!

  • Jeannie
    Jeannie on March 1st, 2015

    Back again, I managed to figure out everything except the drop down menu part.

  • Leanne
    Leanne on December 15th, 2015

    Firstly, thanks for such a great tutorial, it was a huge help for me with starting to make shopify themes.
    Secondly, I don’t suppose you have / are planning on doing a responsive tutorial for this are you?

    Thanks

Post a comment