Shopify section for adding different header images for each page

Shopify sections are useful for creating home pages with multiple sections that you can customise and swap around. However, off-the-shelf they are limited because you can’t target content to specific collections, products, pages or blog articles.

If you want to create sections targeted to specific collections, products, pages or blog articles you need to create a reference to them in the section schema.

This example allows you to add a page image title to a specific page. You can use this method to create sections for other templates too – for example an image gallery.

This code outputs the section if the current page handle matches the setting “page_title_page”:

{% if section.blocks.size > 0 %}
  {% for block in section.blocks %}
    {% if block.settings.page_title_page == page.handle %}
        <div class="page-title-image" style="background-image:url({{block.settings.page_title_image | img_url: '2048x'}})">
            <div class="page-title-image-text">
                <h1>{{ page.title }}</h1>
                <p>{{page.metafields.global.description_tag}}</p>
            </div>
        </div>
    {% endif %}
  {% endfor %}
{% endif %}

This schema includes a field called "page_title_page" where an admin can select the page they want the image to appear:

{% schema %}
  {
    "name": "Page titles",
    "class": "page-title-sections",
    "max_blocks": 100,
    "blocks": [
      {
        "type": "page-title-section",
        "name": "Page title",
        "settings": [
          {
            "type": "page",
            "id": "page_title_page",
            "label": "Page",
            "info": "Select the page to display this title"
          },
          {
            "type": "image_picker",
            "id": "page_title_image",
            "label": "Image",
            "info": "4096px wide required"
          }
        ]
      }
    ]
  }
{% endschema %}