Bound settings

Menus, product and collection pickers, picked lists and dynamic sources.

Some settings store a reference rather than a value: a menu, a product, a list of collections, a field of the current page. The template reads the live item. Bound settings work the same on sections and on blocks at any depth.

Menus#

A menu setting stores the chosen menu. The template reads the menu from settings.<id>_resolved:

vascula

{% assign menu = settings.menu_resolved %}
{% if menu.items.size > 0 %}
  <nav aria-label="{{ menu.name }}">
    {% for item in menu.items %}
      <a href="{{ item.url }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}>{{ item.title }}</a>
    {% endfor %}
  </nav>
{% endif %}
{% schema %}
{
  "name": "footer-menu",
  "settings": [
    { "id": "menu", "type": "menu", "default": "footer",
      "editor": { "label": "Menu", "group": "content" } }
  ]
}
{% endschema %}

Field	Meaning
`name`	The menu's name.
`items`	The top-level links, in order.
`items[].title`, `url`, `open_in_new_tab`	The link.
`items[].children`	Nested links, with the same fields.

A menu that was deleted, or no menu chosen, has no items.

Pickers#

product, collection, category, vendor, brand, page, blog_post, blog_category and policy settings store the chosen item. The template reads the item itself:

vascula

{% assign p = settings.product %}
{% if p %}
  <a href="{{ p.url }}">
    {% if p.featured_image %}<img src="{{ p.featured_image | image_url: width: 480 }}" alt="{{ p.featured_image.alt_text | default: p.title }}">{% endif %}
    <span>{{ p.title }}</span>
    {% if p.price %}<span>{{ p.price.current | money }}</span>{% endif %}
  </a>
{% else %}
  {{ "product-1" | placeholder_svg }}
{% endif %}

An item that was deleted or is not available on the storefront reads as nothing. Show a placeholder in that case. The fields of each item are listed in CTX.

Picked lists#

product_list and collection_list settings store several items in the merchant's order, up to max (12 if not set). The template reads a list of items; deleted items are left out.

vascula

{% if settings.products.size > 0 or design_mode %}
  {% for p in settings.products %}
    <article class="card"><a href="{{ p.url }}">{{ p.title }}</a></article>
  {% else %}
    <p class="card card--empty">{{ "product-1" | placeholder_svg }}</p>
  {% endfor %}
{% endif %}
{% schema %}
{
  "name": "featured-products",
  "ctx_needs": ["design_mode"],
  "settings": [
    { "id": "products", "type": "product_list", "max": 8,
      "editor": { "label": "Products", "group": "content" } }
  ]
}
{% endschema %}

Dynamic sources#

In the editor, a merchant can connect a text or textarea setting to store data instead of typing a value, for example the current product's title. The template reads the live value, as text:

vascula

<h1>{{ settings.title }}</h1>

A dynamic source can use only data the section declares in ctx_needs, including metafields. When the data is missing, the setting is empty.