Blog Posts

Customize Theme Settings In Shopify

Customize Theme Settings In Shopify

Hello friends

Let’s see, how to customize theme settings in Shopify!

You can use the settings_schema.json file to configure the theme settings which is accessible using the theme editor. To access the editor, you have to click on “Customize” from the “Themes” page of your Shopify admin.

About settings_schema.json

The “settings_schema.json” file is located in the config directory of a theme. It controls the organization and content of the menu in the theme editor.

settings_schema.json lists all settings that are available for your theme, grouped into sections. If you edit settings_schema.json, your changes must follow the specified file format.

Editing settings_schema.json

You can edit your theme’s settings_schema.json file from your Shopify admin.

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit and click Actions > Edit code.
  • From the file directory in the sidebar, open the Configs folder and click settings_schema.json.
  • When you’ve finished editing, click Save.

Below is code to create the shipping message field into theme settings:

{
"name": {
"de": "Versandnachricht",
"en": "Shipping Message",
"es": "Mensaje de envío",
"fr": "Message d'expédition"
},
"settings": [
{
"type": "header",
"content": {
"de": "Versandnachrichtentext",
"en": "Shipping Message Text",
"es": "Texto de mensaje de envío",
"fr": "Texte du message d'expédition"
}
},
{
"type": "text",
"id": "shipping_msg_text",
"label": {
"de": "Versand",
"en": "Shipping",
"es": "envío",
"fr": "livraison"
}
}
]
}

Copy above code and paste into settings_schema.json.

To display input field data into front-end use the following code:

{{ settings.shipping_msg_text }}

Basic input setting types:

You can set the type attribute for basic input settings to any of the values shown in the table below:

Value Field Type
text Single-line text fields
textarea Multi-line text areas
image_picker Image uploads
radio Radio buttons
select Selection drop-downs
checkbox Checkboxes
range Range sliders

Share your views/queries in comments and do share it with your friends if you find the article helpful!

Next Post »

Easiest way to apply discount coupon directly on checkout page in Shopify

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.