Adding multiple, dynamic items to a single setting in Theme Settings (via Config/schema_json)

Technical Q&A
1

I think the best way I can explain this is by showing an image of what I’d like my Theme Settings UI to look like:

daveh0_0-1630592378460.png
daveh0_0-1630592378460.png302×994 43.1 KB

So basically, my client has several brick and mortar shop locations that are displayed on several Pages (and possibly blogs). The client needs an easy way (i.e. no editing of liquid files) to be able to easily add/update/hide these locations globally so that any changes (which occur quite frequently) will be reflected on ALL the pages displaying shop/location info.

Unless I’m missing something really cool, this is not possible through Config/schema.json and Theme Settings as I have portrayed in my image above. I know this can be achieved with blocks in the schema for an individual section, but since those values are not globally accessible the way Theme Settings are, I don’t think it will work. The only other thing I can think of would be to have a section where all the locations are managed and in the template part, use a bunch of IF statements to display the correct markup. something like:

{% if page.handle == 'our-shops' %}
  
    {% for block in section.blocks %}
      {% if block.settings.active == false %}{% continue %}{% endif %}
     - {{ block.settings.loc-display-str }}
    {% endfor %}
  

{% else if page.handle == 'new-shop' %}
  # Vist our newest shop in {{ section.blocks[0].settings.loc-display-str }}
{% else if page.handle == 'other-page' %}
  ...
{% endif %}

{% schema %}
{
  "name": "Locations",
  "class": "shops__locs",
  "settings": [ ],
  "blocks": [
    {
      "type": "location",
      "name": "Location",
      "settings": [
        {
          "type": "text",
          "id": "loc-display-str",
          "label": "Location Name"
        },
        {
          "type": "tetx",
          "id": "locID",
          "label": "Location ID"
        },
       {
        "type": "checkbox",
        "id": "active",
        "label": "Active",
        "default": true
      }
    ]
  }
}

{% schema %}

Something along those lines anyway… but that seems like a bit of a hack to me, but I’m pretty new to Shopify, so maybe that’s the only way to achieve what I’m trying to do. If I’ve got any of this terribly wrong, please don’t hesitate to point it out, and if you have any input regarding the “right” way to do this, I’m all ears.

2 Likes