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
  

    

      
Page to show on homepage
      

    
    

      
Collection to show on homepage
      

    
  

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.

...
  
    Collection to show on homepage
    
   
  
    # of Products to show
    
      
          4
          8
          12
          16                              
      
    
  

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.

  
Footer Settings
  

    

      
Show Facebook Icon
      
      

    
    

      
Facebook Link
      

    
    

      
Show Twitter Icon
      
      

    
    

      
Twitter Link
      

    
    

      
Show Pinterest Icon
      
      

    
    

      
Pinterest Link
      

    
       
  

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

← Back to table of contents

11 Comments