How do I create a custom page template to showcase information?

Solved
Highlighted
New Member
3 1 0

I want my client to be able to create their own pages with a simple template that showcases text and an image. The problem I run into is, if I have made two pages using that template, they both share the same information/image when I want to have them with their own respective text/image. I tried to use a block in my image but didn't have luck either. Thanks in advance.

page.image-with.text.liquid

<div class="h1-container">
  <div class="wrapper">
    <h1>{{page.title}}</h1>
  </div>
</div>
<div class="wrapper">
  <section class="text-img-container">
    <div class="text-container">
      <div class="content">
        {{ page.content }}
      </div>
      {% section 'button' %}
    </div>
    {% section 'img' %}
  </section>
</div>

 

button.liquid

<a class="button-reverse" href="{{ section.settings.link }}">{{ section.settings.button_label }}</a>

{% schema %}
  {
    "name": "Button",
    "settings": [
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "url",
        "id": "link",
        "label": "Button Link"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button Link Label"
      }
    ]
  }
{% endschema %}

 

image.liquid

  {% for block in section.blocks %}
      {% case block.type %}
      {% when 'image_picker' %}
        <img src="{{ block.settings.image_id | img_url: 'master' }}" alt="{{ img.alt }}">
      {% endcase %}
  {% endfor %}


{% schema %}
{
  "name": "Image",
  "blocks" : [
    {
      "type": "image_picker",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image_id",
          "label":  "Insert an Image" 
        }
      ]
    }
  ]
}
{% endschema %}

 

0 Likes
Highlighted
New Member
3 1 0

This is an accepted solution.

Solved using an if statement comparing a page.handle declared in the block settings and comparing that handle to the actual page.handle.
https://sumankc.com/2017/07/19/shopify-one-section-schema-for-multiple-pages-dynamic-sections/

0 Likes