How to implement a reusable and editable section across multiple pages?

Store Design
,
1

Hello folks,

What is the best way to implement a section that will be used on many pages - e.g. a FAQ section - which can be updated within the Theme Editor and will have a dynamic number of blocks as questions are added, whilst remaining in sync on all pages?

ie. I want it to be the same on all pages and would ideally like to be able to update it wherever it appears - but if this is not possible have a way to update it where it will automatically update on all pages where it appears.

I seem to remember this being a thing in Shopify v1 because of the limitations, but is there a solution to do this now? I considered a hard-coded section but this isn’t as easy for clients to update. And meta-objects didn’t seem to tick the right boxes.

Apologies if I’m missing something obvious!

Thanks,

2

Hey! Here are the steps I take to build a reusable section.

  1. Understand how sections work and how to build them: https://shopify.dev/docs/themes/architecture/sections/section-schema
  2. Build out your FAQ block with HTML/CSS/JS
  3. Use ‘Blocks’ in the schema so you can build out questions via the customizer.
  4. Loop over the blocks and display them as FAQs.

Here’s an example of how I built mine. No css or JS included here, but the structure of liquid and html is there:


  # {{ section.settings.accordion_title }}
  {% for block in section.blocks %}
  
    {% case block.type %}
        {% when 'panel_header' %}
          ## {{ block.settings.panel_header }}
        {% when 'panel' %}
          
          

            

{{ block.settings.panel_info }}

          

    {% endcase %}
  {% endfor %}

{% schema %}
  {
    "name": "Accordion",
    "settings": [
      {
        "type": "header",
        "content":"Title"
      },
      {
        "type": "text",
        "id": "accordion_title",
        "label": "Accordion Title",
        "default": "FAQs"
      }
      ], 	
      "max_blocks": 50,
      "blocks": [
         {
           "name": "Panel",
           "type": "panel",
           "settings": [
              {
                "type": "header",
                "content":"panel"
              },
             {
               "type": "text",
               "id": "panel_title",
               "label": "Panel Title"
             },
             {
               "type": "textarea",
               "id": "panel_info",
               "label": "Panel Information"
             }
           ]
         },
        {
          "name":"Panel Header",
          "type":"panel_header",
          "settings" : [
              {
                "type": "header",
                "content":"panelHeader"
              },
             {
               "type": "text",
               "id": "panel_header",
               "label": "Panel Header"
             }
          ]
        }
      ]
  }
{% endschema %}
3

@DevBijan

I’m not sure this addresses the question I asked - I need it to stay in sync on all pages.

4

You might be able to do that with default values and presets. https://shopify.dev/docs/themes/architecture/sections/section-schema#presets

You can also hardcode it and use the translation files to make the content easier to edit. You would just lose the dynamic capabilities, so probably not the best solution.

I’m not sure if you can have one section persist with the same information across all webpages without it connecting to a database or redoing the content on each page.

Also I know you said metaobjects weren’t working how you wanted. Can I ask why? I’ve never used them for an FAQ but it looks like it would have the capabilities you are looking for, so I’m just curious why they aren’t working for you?

5

I’m afraid default values won’t help when we need to update, one of the stipulations I have for this situation.

I’ve not found a way to do it as we’d like - but I feel like an answer could exist as I’m sure I’m not the first person to want a dynamic persistent section. It would essentially work in a similar way to the header and footer.

The limitations of metaobjects mean I could create one for each question / answer, but this would then mean connecting each one of these up in an e.g. tab section and then updating them all manually if updated, meaning it’s about the same effort.

So far I’m thinking hard-coding it will be the easiest solution, but it’s just not great for clients who don’t want to dip into code.

Thanks,

6

If you are hardcoding it for clients, I would recommend making a new translation section so clients can easily update the text content from the ‘Default Content’ in Shopify instead of going into the code. They wouldn’t be able to add or remove questions, but it may provide some ease of use.