Shopify Theme from Scratch Part 15: Theme Settings 2/2
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:
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.
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 ๐
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).
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.
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.
After uploading, make sure the icons can be found in your theme assets (Figure 15.5).
Open settings.html. Under the fieldset for “Footer Settings”, add the code in red below.
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.
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.
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
11 Comments
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
March 1st, 2015
Back again, I managed to figure out everything except the drop down menu part.
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!
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!
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?
February 1st, 2015
Fantastic job on this tutorial!
Very helpful and greatly expanded my understanding of liquid and the shopify customizing methods in general.
October 22nd, 2014
Simply awesome – well written, easy to follow tutorial.
I owe you a drink ๐
June 6th, 2014
Thanks for all the tutorials, there were certainly loads there that I hadn’t seen before!
good work sir!
April 6th, 2014
Thanks for the kind words Toby, have a good one ๐
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
December 27th, 2013
Thanks for the tuts.