Building Dynamic Sections in Shopify Online Store 2.0

As we all know, on June 29, 2021, Shopify released Online Store 2.0 with a huge number of functionalities. One of its functionality is to reuse dynamic sections on any page use wants. But, the question is, How one can create or build dynamic sections in Online Store 2.0

Well, in this article, we will go step-by-step for building dynamic sections in Online Store 2.0 on Shopify Store using Liquid.

Step 1: Go to Online Store -> Edit code -> Sections -> Add a new Section -> Select Liquid -> Name your section -> Click on Done Button.

Step 2: It will create your section with some code like the below image.

Step 3: Provide a relevant name to the section. It will be displayed in the Theme Settings.

Step 4: For accessing the section anywhere, we need to add presets in the Schema. It looks like this.

"presets": [
  {
    "name": "Text Over Image",
    "blocks": []
  }
]

Step 4: Now, Go to Theme Settings -> Add Section -> Search your Section -> Click on it and Save Theme Settings. Now, you are able to see your section on the Home Page when we will add some design.

Using settings option in the schema, you will be able to add data single time only. To add data multiple times, you will need to use blocks options.

Step 1: We will set Image Picker and Text in the Settings of Schema Options so that we can change it in the Theme Settings. If you want to learn more about Input Settings, then do check out this Link

For now, we will add these 2 settings which are as below.

"settings": [
  {
    "type": "image_picker",
    "id": "image",
    "label": "Select Image"
  },
  {
    "type": "richtext",
    "id": "content",
    "label": "Content"
  }
]

Step 2: Now, go to Theme Settings -> Text over Image. You can find that there are 2 options added.

This is how we can access the value which is provided in the theme settings.

{{ section.settings.image }}
<-- It will get the value of the image -->

{{ section.settings.content }}
<-- It will get the value of the content -->

Step 2: Now, Let’s add some HTML with Liquid code. Please add the below code at the top of the file.

<section class="text-over-section">
  <div class="image-parent">
    {%- if section.settings.image != blank -%}
      {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
      {%- capture sizes -%}
        (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
        (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
      {%- endcapture -%}
      {{
        section.settings.image
        | image_url: width: 1500
        | image_tag: loading: 'lazy', sizes: sizes, widths: widths, class: 'image'
      }}
    {%- else -%}
      {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    <div class="text-cotent-parent">
      <p>
        {{ section.settings.content }}
      </p>
    </div>
  </div>
</section>

Step 3: Now, Go to theme settings, and refresh it. You can see by default the image placeholder. Please add the image from the option. You will be able to see that image is added. Now, also add some text in the below rich text box. The Layout will not look decent since we have not added CSS.

Step 4: Now, Let’s add some CSS above the schema.

<style type="text/css">
  .image-parent {
    position: relative;
    padding-top: 60%;
  }

  .image-parent img.image, .image-parent .placeholder-svg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-width: 100%;
      max-height: 100%;
  }

  .text-cotent-parent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: #ffffff;
    }
</style>

Step 5: Go to Theme Settings and refresh the page. You will see your section properly now as shown below.

You can try more input settings options as provided in the Shopify Doc.

Using the blocks options of the schema, you can add data multiple times.

Step 1: Add the below code in the schema.

"blocks": [
  {
    "type": "text_over_iamge",
    "name": "Text over Image",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Select Image"
      },
      {
        "type": "richtext",
        "id": "content",
        "label": "Content"
      }
    ]
  }
]

The file will look like this.

Step 3: Now, Go to Theme Settings and refresh it. You will be able to see the blocks and can add multiple times.

Step 4: Let’s work on coding. We will need a for loop to go through all blocks.

{% for block in section.blocks %}
  {{ block.settings.image }} <-- you can access image -->
  {{ block.settings.content }} <-- you can access text -->
{% endfor %}

Step 5: Copy the below code and paste it into your file, and save it.

<section class="text-over-section">
  {% for block in section.blocks %}
    <div class="image-parent">
      {%- if block.settings.image != blank -%}
        {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
        {%- capture sizes -%}
          (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
          (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
        {%- endcapture -%}
        {{
          block.settings.image
          | image_url: width: 1500
          | image_tag: loading: 'lazy', sizes: sizes, widths: widths, class: 'image'
        }}
      {%- else -%}
        {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      <div class="text-cotent-parent">
        <p>
          {{ block.settings.content }}
        </p>
      </div>
    </div>
  {% endfor %}
</section>

Step 6: Now, again go to theme settings and refresh it. you can add data and it will be displayed in the section.

Hurrah, you have learned how to make sections dynamic in Shopify Online Store 2.0

You might also like: How to add a back-to-top button in Liquid Shopify