Shopify Theme Customization — Implementing Your Own Settings (settings_schema.json)

3 min readDec 5, 2020

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 in any template 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.

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 %}
      <p>we're ordering now!</p>
{% else %}
      <p>we're not ordering :(</p>
{% 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 }}

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 }}'};
}

Collections

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.

[
   {
       "name": "Collection",
       "settings" : [
        {
          "type": "collection",
          "id": "feature_collection",
          "label": "Feature collection"
        }
      ]
   }
]

collections['the-handle'].variable

The setting would be referenced by:

{{ collections[settings.feature_collection] }

{{ collections[settings.feature_collection].title }}{% for product in collections[settings.feature_collection].products%}
<p>{{ product.title }} | {{ product.price }}</p>
{% endfor %}

Products

Products are referenced similarly to collections. Again we’ll use the Liquid Cheat Sheet to 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 the size available for that photo. If small doesn’t work, maybe try original.

<img src="{{ all_products[settings.feature_product].featured_image | img_url: 'small' }}" alt="{{ all_products[settings.feature_product].title }}">

For more info you can check the original post
Click here for original post

Thanks for reading