You may be wondering, "what the hell is that Boombox thing on the top-right corner of your site?". Allow me to introduce you to Boomi.
The idea for Boomi spawned from a picture of a boom box that I saw on Flickr. The boom box kind of reminded me of a robot head, so I started doodling on my notepad. After a few sketches, I decided to use him for a music video project that I had to do for Audio/Video class back in 2007. His debut was in the following music video (WARNING: my animation skills are laughable).
A few weeks back, Shopify released a new feature that allows designers to create a form within the theme editor that allow those without programming knowledge to customize their theme. The default themes already come with a form that allows you to customize certain aspects of the theme, but what if you want to add more customizable elements to the store? Or perhaps you’ve made a theme from scratch, and want to make your theme customizable so that your client can customize the theme themselves when you hand it over to them.
In this tutorial, I’m going to be using an older version of the Minimify theme to walk you through how to make the text colors customizable using the settings form. Please click here to download the Minimify theme. With that said, you can still follow this tutorial with a completely different theme.
1. Create the form
In the Theme Editor, click the “Create a settings form” button.
One question I see often in Shopify is “how do I make my metadata for the different pages on my store?”. I’m not sure how this affects ranking in search engines (in fact if anyone can clarify this for me, that would be awesome), but in this tutorial I will just show you how this is done. This tutorial will also serve as a refresher on how to use conditional statements with Liquid.
A Brief Overview of Conditional Statements in Liquid
Conditional statements are ways to tell Liquid (or any other programming language) to do something based on certain conditions. For example, you can tell the code “If condition A is true, take action A. If condition B is true, take action B. If neither are true, take action C”. Below is an example of a conditional statement in Liquid:
{% if template == "index" %}
You are on the index page!
{% elsif template == "collection" %}
You are on the collection page!
{% else %}
You are on a page that is NOT the index page nor the collection page!
{% endif %}
The code above will output the line in red if the visitor is on the index page of the Shopify store. Conversely, it will output the line in green if the visitor is on the collection page of the Shopify store. If the visitor is on a page that is not the index page nor the collection page, it will output the line in blue.
I know I know, it’s looking rather empty in here right now, but starting this month, I’ll be writing about web design, music, art… pretty much anything that I think is awesome.
I’ll also be writing a lot about Shopify. I plan on writing a lot of tips & tutorials on using Shopify’s Liquid templating system. I think Shopify is the best e-commerce solution out there, and my goal is to help more people get started with their Shopify stores.
By no means am I a web design or e-commerce expert. However, I think I have enough knowledge on both of these topics to help those who might be a little nervous to start out on their own. With that said, if you see something in my code that you think can be improved, please feel free to notify me. I enjoy learning as much as I enjoy teaching!
Thanks again for dropping by – don’t forget to check back!
