Tetchi x Wordpress

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

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

Leanne

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

Jeannie

March 1st, 2015

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

Jeannie

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!

Joe

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!

Tracy

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?

Gordon

February 1st, 2015

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

Raj

October 22nd, 2014

Simply awesome – well written, easy to follow tutorial.

I owe you a drink ๐Ÿ™‚

Luke

June 6th, 2014

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

good work sir!

tetchi

April 6th, 2014

Thanks for the kind words Toby, have a good one ๐Ÿ™‚

Toby Powell

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

curtisaallen

December 27th, 2013

Thanks for the tuts.