Add "blocks" in 'settings_schema.json' in shopify theme

4
votes

I am new to Shopify and building my custom theme in Shopify I want to add "blocks" in settings_schema.json as I add in the section schema, Is it possible? if yes then how can I add it? Please help me
I have added the following code:

    [
  {
    "name": "theme_info",
    "theme_name": "Slate",
    "theme_version": "0.11.0",
    "theme_author": "Shopify",
    "theme_documentation_url": "https:\/\/shopify.github.io\/slate\/",
    "theme_support_url": "https:\/\/github.com\/Shopify\/slate"
  },
  {
    "name": "Colors",
    "settings": [
      {
        "type": "header",
        "content": "General colors"
      },
      {
        "type": "color",
        "id": "color_theme",
        "label": "Theme color",
        "default": "#efeeeb",
        "info": "Used for theme"
      },
      {
        "type": "color",
        "id": "color_primary",
        "label": "Primary color",
        "default": "#4d4d4d",
        "info": "Used for text links, and primary buttons"
      }
    ],
    "blocks": [
      {
        "type": "product_colors",
        "name": "Product colors",
        "settings": [
          {
            "type": "color",
            "id": "color_label",
            "label": "Color label",
            "default": "red"
          },
          {
            "type": "color",
            "id": "color_code",
            "label": "Color code",
            "default": "#ff0000"
          }
        ]
      }
    ]
  }
]

But it gives an error:

Error: Section 2: 'blocks' is not a valid attribute

Any other solutions also appreciated

1
themesshopify

1 Answers

13
votes

Blocks are not supported in the settings_schema.json file.

Blocks are only supported inside section files inside a {% schema %}{% endschema %} tags.

There are a few workarounds to your problem.

Use linklists

If you must use the settings_schema.json than you can use a link_list field to select a specific link_list where you can createa a navigation with color label as link title and hex code as the link url address.

Use seprate section

Use a separate section for the colors where you will have the option for the blocks.

Use textarea

You can use a textarea and with a little splitting you can get the effect you want.

For example the value of the textarea will be:

Black|#000000
White|#ffffff
Grey|#cccccc

And you will do something like:

{% assign textarea = settings.textarea | newline_to_br | split: '<br /> %}
{% for text_row in textarea %}
  {% assign text_row_array = text_row | split: '|" %}
  {% assign color_name = text_row_array[0] %}
  {% assign color_hex = text_row_array[1] %}
  ...
{% endfor %}

Sum up

The most user friendly option is the section option, but you can decide what suit your needs best.