We generally write a section file in shopify to include it somewhere. And one section data gets saved and the output is same data. Additionally there is block concept in schema from where we can add blocks dynamically. Blocks are same sets of options but in a multiple numbers.

Basically the requirement of this was generated when i have to have sections on numerous pages but with same structure & different data. If your requirement is the same case then you are at right place.

  1. I have created two pages for the demo purpose. Page 1 and Page 2 and assigned those on main menu via navigation sections.
  2. Those two pages use same page template custom.page. [This is created from `Online store > Edit HTML/CSS > add  new template > select page type and name it custom` so this would generate page.custom.liquid template.]
  3. Assign this page.custom.liquid template to Page 1 & Page 2 [Edit Page 1 & Page 2, change template suffix from default page to `page.custom`]
  4. Until now we differentiated the Page 1 and Page 2 template from other different pages. Now let’s add a common section on custom.page template.
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {% section 'dynamic-section' %}
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

On the code above we just included `{% section ‘dynamic-section’ %}` section. I have added it just above the page content area. You can place it above or below as according to your requirement.

5. Create a dynamic-section.liquid section template under sections.  [Edit HTML/CSS > Under Sections > Create template]

6.  On dynamic-section.liquid template add following code.

<!--/ page handle diffrentiates with each page -->
{% assign page_handle = page.handle %}

{% if section.blocks.size > 0 %}

	{% for block in section.blocks %}
		<!--/ ONLY print specific page data -->
		{% if block.settings.page_handle == page_handle %}
			{{ block.settings.page_title }}
			<!--/ To print content of particular page -->
			{% comment %}
				{% assign page_content = block.settings.page_handle %}  
	        	{{ pages[page_content].content }}
			{% endcomment %}
		{% endif %}
	{% endfor %}

{% endif %}


{% schema %}
  {
    "name": "Page Management",
    "class": "index-section",
    "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Common Title"
        }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Page Management",
        "settings": [
		  {
            "type": "page",
            "id": "page_handle",
            "label": "Select a page"
          },
		  {
            "type": "text",
            "id": "page_title",
            "label": "Page title"
          }
		    
        ]
      }
    ]
  }
{% endschema %}

The logic here is i have compare the page handle and only printed from the block whose page handle matches. Cheers !!

Following are the screenshots of Theme customization section. To view result Navigate to `Online store > Edit html/css > Customize theme` Navigate to page 1 from Top menu(we added those page 1 and page 2 from navigation)

Screenshot 1



Screenshot 2

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts