In a previous post we discussed how to make a theme customizable with the settings file to allow store owners to change their Shopify themes themselves. As mentioned these settings show up when a user clicks the Customize Theme button from online > themes section of the admin panel and are defined in the config/settings_schema.json file in the theme development files.
In this post we will discuss how to access these settings and integrate them while developing a theme.
Referencing the Settings
In order to reference the settings in the theme you use the liquid templating language. You can access the settings info in both the logic tags {% %} and the display tags {{ }}. In either case, you would use settings.id where id is the attribute defined in the setting.
For example if the settings looked like this:
[
{
"name" : "Colors",
"settings" : [
{
"type": "color",
"id": "color_borders",
"label": "Border Colors",
"default": "#e5e5e5",
"info" : "this will be the colors for borders"
},
{
"type": "color",
"id": "color_body_text",
"label": "Body Text",
"default": "#2980b9"
}
]
}
]
You would reference the Border Colors like :
{{ settings.color_borders }}
Regular Setting Types
Regular settings include the following types: text, textarea, image, radio, select, check. Each type allows the user to choose some information to modify the theme.
These settings are referenced with either set of liquid tags.
The {{ }} places the information on the page
{{ settings.id }}
The {% %} allows you to use the settings information to inform logic of the theme.
{% if settings.product_order == true %}
we're ordering now!
{% else %}
we're not ordering :(
{% endif %}
Specialized Setting Types
Specialized settings include the following types: color, font, collection, product, blog, page, link_list, and snippet. To reference these, it is a little more complicated than the regular settings.
Colors and Fonts
Colors and fonts are referenced the same way as mentions above
{{ settings.color_borders }}
Of course, if you did this on a page, what would show up is the name of the color or the hex code. This probably isn't very helpful in most cases. However, if you save your sass file as styles.scss.liquid you can use the liquid tags right in your styles!
.link {
border: 2px solid #{'{{ settings.color_borders }}'};
}
Note that the liquid tags are wrapped in #{ } string interpolation tags and then also quotes.
Fonts would probably also be more useful referenced in the styles.scss.liquid file rather than right on the page
.link {
font-family: #{'{{ settings.header_font }}'};
}
Collections
Collections can get a little more complicated. First thing to note is that when you set the type of setting to collection what shows up to the end user in the side panel of options is a dropdown with all of the collections already defined in the store. This means for there to be a choice at least 2 collections must be defined.
Second thing to note is that going forward in order to figure out how to reference each special setting the Liquid Cheat Sheet will be invaluable. For instance, if you take a look at the collection.liquid section of the cheat sheet the first thing is how to access a specific collection anywhere.
collections['the-handle'].variable
'the-handle' is the name of the collection, or more specifically the slug of the collection. In the case of the settings file, you insert the settings.id, where id is the name of the setting as defined by the id attribute. So if the settings file is defined:
[
{
"name": "Collection",
"settings" : [
{
"type": "collection",
"id": "feature_collection",
"label": "Feature collection"
}
]
}
]
The setting would be referenced by:
{{ collections[settings.feature_collection] }}
However, the above code will only show up as CollectionDrop. To get something meaningful, you'll need to select an attribute of collection (which is availabe on the liquid cheat sheet) such as title or products.
{{ collections[settings.feature_collection].title }}
You may also want to access info about each product in that collection. This is easily achieved by referencesing the products attributes on the collection and then looping through those.
{% for product in collections[settings.feature_collection].products %}
{{ product.title }} | {{ product.price }}
{% endfor %}
This simple liquid for loop sets each product in the collections products to the variable product and then prints the title and price onto the page.
Products
Products are referenced similarly to collections. Again we'll use the Liquid Cheat Sheet see how we access products. If you take a look at the product.liquid section of the cheat sheet the first thing is how to access a specific product anywhere.
all_products['the-handle'].variable
Note that the term all_products is used instead of products.
Thus to access information associated with the feature_product, for example the title and price.
{{ all_products[settings.feature_product].title }} | {{ all_products[settings.feature_product].price }}
To access the featured image of the product you must also add the size using a pipe and setting theimage_url to a size available for that photo. If small doesn't work, maybe try original.
![{{ all_products[settings.feature_product].title }}]({{ all_products[settings.feature_product].featured_image | img_url: 'small' }})
Blog
The blog works very much the same as the other specialized settings. Reference the Liquid Cheat Sheet for blog.liquid.
blogs['the-handle'].variable
In a single store there may be many blogs, so the title is refering to the name of the whole blog.
{{ all_products[settings.feature_product].title }}
However, to access the blog posts within each blog, the key word is articles. So in order to loop through all the articles the code would look like this.
{% for blog in blogs[settings.blog_thing].articles %}
{{ blog.title }}
{% endfor %}
Page
The page works very much the same as the other specialized settings. Reference the Liquid Cheat Sheet for pages.liquid. NOTE : there seems to be a little typo, the cheat sheet says page while it should really read pages in referencing the handle:
pages['the-handle'].variable
Creating a link to go back to whatever page is set to the homepage is now as easy as the following code.
{{ pages[settings.homepage].title }}
Link List
The link list is a dropdown of all the menus available in the store. For example the main menu or the footer menu. Accessing these is the same as the previous examples.
linklists['the-handle'].variable
{{ linklists[settings.link_thing].title }}
And similar to the blogs and collections you can also loop through the links in each link list.
{% for link in linklists[settings.link_thing].links %}
{{ link.title }} | {{ link.url }}
{% endfor %}
Snippet
You may notice that snippets are not referenced in the Liquid Cheat Sheet. This is probably because snippets are referenced more similarly to the regular settings. For example the snippet set with an id this_snippet would be this:
{{ settings.this_snippet }}
The thing that makes them specialized is you create snippets in the theme. They are found in the snippets folder of the theme. So they can be whatever you want and bringing them into the theme will be unique to what you create. For example a product-loop is probably a very popular one. To bring it in as a setting:
{{ include settings.this_snippet }}
This won't work for my product-loop because it requires a collection of products to be looped over outside of the snippet. So I had to modify the code to look something like this:
{% for product in collections[settings.feature_collection].products %}
{% include settings.this_snippet %}
{% endfor %}
This has the added advantage of being variable based on the collection chosen as well.
