Chapter 6: Configuring the Theme Settings

In previous chapters, we have been learning about Shopify as a platform, familiarizing ourselves with Liquid basics, and using the Liquid core to create various features on the storefront. However, unless the store owners are developers, they will not have much control over any features we create for them.

In this chapter, we will be learning how we can use JSON to create settings that are accessible through the theme editor, which will allow the store owners to easily customize the theme without making the code adjustments throughout the theme. We will cover the following topics in this chapter:

• Exploring JSON settings
• Learning about the input setting attributes
• Basic and specialized input types
• Organizing the theme editor
• Glancing at the deprecated settings

By the time we complete this chapter, we will have gained a deeper understanding of the importance of JSON, and how we can use it to create theme settings...

Technical requirements

While we will explain each topic and have it presented with the accompanying graphics, we will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

The code for this chapter is available on GitHub at https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter06.

The Code in Action video for the chapter can be found here: https://bit.ly/3nLQgMf

Exploring JSON settings

In Chapter 1, Getting Started with Shopify, we briefly mentioned the Config directory, where we can define and manage the global JSON values across the entire theme. Let's remind ourselves of the two essential .json files that we can find within this directory:

• The settings_schema.json file allows us to create and manage the content inside the theme editor on our theme, which we can reference throughout the entire theme file.
• The settings_data.json file, on the other hand, records all the options defined in our schema file and saves their values. We can consider this file as our theme database, which we can manage by updating the theme settings through the theme editor or by directly editing the values inside the settings_data.json file.

We can group the global settings options into different categories for more straightforward navigation, which we can do using the name and settings attributes:

{
  "name": "...

Learning about the input setting attributes

Each input settings option can contain the following five attributes, which are also called standard attributes:

• As its name indicates, the type attribute allows us to set the type of the input setting, which can be either a basic type or a specialized type. The type attribute is mandatory.
• The id attribute is another mandatory attribute that we will use later to access and read the setting value.
• The label attribute allows us to set the label of the input settings inside the theme editor. The label attribute is mandatory.
• The default value serves as a failsafe and allows us to set a default option for the input settings. However, it is not mandatory.
• The final attribute, info, allows us to include an additional clarification regarding the input settings and is also not mandatory.

While most of the input settings will contain only the previously mentioned attributes, depending on the input type, there will be...

Organizing the theme editor

In the previous section, we have learned about different types of configurable settings, which allows us to easily update its value using a series of basic or specialized input selectors, where now we will learn about a different set of settings, sidebar settings. The sidebar settings will allow us to divide each category's settings into other separate blocks.

The sidebar settings do not hold any value, nor can we configure them through the theme editor. Their only use is to provide us with additional information and help us organize different sets of input settings into separate blocks for more straightforward navigation.

Under the sidebar settings, we can use the following options:

• header
• paragraph

As opposed to the basic and specialized input settings, header and paragraph can only contain the following standard attributes:

• As its name indicates, the type attribute allows us to set the type of setting, whose value...

Glancing at the deprecated settings

While the following settings are no longer supported, there is a high probability that we might encounter them on older themes that their store owner never updated. Since these settings are no longer supported, we will not go into that much detail on how they work, but we will provide some general guidelines for identifying them and what they do.

The font input

The font input type of setting allowed us to generate a shortlist of font files accessible on Shopify:

{
  "type": "font",
  "id": "body_font",
  "label": "Body font"
}

The introduction of the font_picker input type, which we have mentioned previously, made the font input type of setting obsolete.

The snippet input

As its name suggests, the snippet input type allowed us to select any snippet file that we created previously within our theme and execute its content in a specific position...

Summary

In the previous chapters, we have abstained from going over every specific option, consequently creating a list of options that we need to learn to keep everything concise and to the point. However, in this chapter, we have gone over each option and carefully explained how to use it, when, and what we can expect, since, on account of their importance, we will use the knowledge that we have learned in this chapter on a regular basis.

We have learned how to generate some of the most basic input types, which we can use to output various types of content and types of input, allowing us to create additional logic related to specific content. Additionally, we have also learned how to output specialized input types, allowing us to create complex features with an easy and configurable interface.

Lastly, we have learned how we can organize the JSON settings into separate blocks for better readability. The knowledge that we have attained through this chapter will be helpful and...

Questions

1. What are the two types of input settings?
2. What's the issue that will cause an error with the following piece of code?

   {
     "type": "text",
     "id": "header_announcement",
     "label": "Text",
   }

3. How can we include a custom font file within Shopify and use it throughout the theme editor?
4. What are the two issues that will prevent us from executing the following piece of code?

   {
     "type": "range",
     "id": "number_of_products",
     "min": 110,
     "max": 220,
     "step": 1,
     "unit": "pro",
     "label": "Number of products",
     "default": 235
   }.