Custom Template in Customizer with Custom Dynamic Section

Solved
Tourist
5 0 0

Thing I did:

I made custom template [page.multi-template.liquid] and call {% section 'multi-section' %} in this template.

So this section showing in Customizer as well where I can manage to add images through customizer.

Section Code:

{% for block in section.blocks %}
        <div class="grid-item" {{ block.shopify_attributes }}>
          {% case block.type %}

            {% when 'first-section' %}
            {% include 'snippet_first-section' %}

            {% when 'second-section' %}
            {% include 'snippet_second-section' %}

            {% when 'third-section' %}
            {% include 'snippet_third-section' %}

            {% when 'fourth-section' %}
            {% include 'snippet_fourth-section' %}

          {% endcase %}
        </div>
        {% endfor %}

{% schema %}
        {

  "name": "Multi Image Styles",
          "blocks": [
            {
              "type": "first-section",
              "name": "Section Images Style 1",
              "settings": [
                  {
                  "id": "imageOne",
                  "type": "image_picker",
                  "label": "Image"
                },
  {
                  "id": "imageTwo",
                  "type": "image_picker",
                  "label": "Image"
                },

  {
                  "id": "imageThree",
                  "type": "image_picker",
                  "label": "Image"
                }
              ]
            },
            {
              "type": "second-section",
              "name": "Second Section",
              "settings": [
                  {
                  "id": "imageOne",
                  "type": "image_picker",
                  "label": "Image"
                }
              ]
            },
            {
              "type": "third-section",
              "name": "Third Section",
              "settings": [
                 {
                  "id": "imageOne",
                  "type": "image_picker",
                  "label": "Image"
                }
              ]
            },
              { 
                "type": "fourth-section",
                "name": "Fourth Section", 
                "settings": [ 
                    {
                  "id": "imageOne",
                  "type": "image_picker",
                  "label": "Image"
                }
              ]
            } 
          ]
        }
      {% endschema %}
    

What I want with this template:

I want to use [page.multi-template.liquid] template on different pages and want to use this dynamic section on different pages as requirement.

Achievement:

I created Page1 and assigned it [page.multi-template.liquid] template. I go to customizer and choose multiple images from customizer and those are showing as desired.

Problem:

I created new Page2 and assigned it [page.multi-template.liquid] template. Now when I open in customizer it supposed to be empty, but No, it is coming with the data of Page1 I previously made.

The sad part is I made changes on Page2 and it is applied automatically on Page1.  But according to requirement both pages are using different images and user will be managing both from customizer. 

I need to do this with this method as I tried apps but due to some limitation I am working custom. 

I request our experts to help me solve this problem as I am new to code but I love Shopify and any help will be highly appreciated.

Thank you in advance. 

 

0 Likes
Highlighted

Success.

Shopify Partner
532 111 151

@Sophia10 

 

I understood your goal but it's not possible to use same page template for multiple pages to add different data.

You must have to create new page template as well as new section file and copy/paste the code.

 

Thank you,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
1 Like