When building a Shopify page, sometimes the default templates just don’t cut it. Luckily, Shopify allows you to create customizable dynamic sections on your pages, giving you more control over the layout and content of your online store. This post will walk you through creating customizable dynamic sections on your Shopify page without coding.

You may have noticed limited templates when building your Shopify page. While these templates are helpful, they may only sometimes provide the exact look and functionality you want for your online store. It is where customizable dynamic sections come in.

What are dynamic sections?

Customizable Dynamic sections in Shopify allow you to add customizable content blocks to your pages. These sections can be moved around, customized, and duplicated to create unique page layouts. Essentially, they allow you to create page templates without writing any code.

Why use dynamic sections on your Shopify page?

Customizable Dynamic sections are an excellent tool for customizing your Shopify page because they give you more control over the layout and content of your online store. With active sections, you can add and rearrange content blocks, such as images, videos, text, and products, on your page to create a unique shopping experience for your customers. As a result, it can help you differentiate your store from others and ultimately increase sales. Additionally, because dynamic sections are customizable, you can create pages matching your brand and design aesthetic.

Creating Custom Sections on Shopify

Now that you understand what dynamic sections are and why they are helpful, let’s walk through the steps to create custom sections on your Shopify page.

How to create a custom section in Shopify?

  1. From your Shopify admin, go to Online Store > Themes.
  2. Select the theme you want to edit and click “Actions” > “Edit Code.”
  3. In the left-hand sidebar, click “Add a new section.”
  4. Give your new section a name and click “Create Section.”
  5. Add the necessary code to create your custom section in the new section file that appears. Depending on the functionality you want to add, it can include HTML, CSS, JavaScript, and liquid code.

Create a new section by adding the necessary code to the new file. For example:

				
					{% comment %}
  Create a new section
{% endcomment %}

{% schema %}
  {
    "name": "New Section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Section Title"
      }
    ],
    "presets": [
      {
        "name": "New Section",
        "category": "Content"
      }
    ]
  }
{% endschema %}

{% comment %}
  Add your custom code here
{% endcomment %}

Adding custom sections to your Shopify page

  1. Once you’ve created your custom section, go to the page where you want to add it.
  2. Click “Add section” in the area where you want to add your custom section.
  3. Find your custom section in the list of available sections and click “Add.”
  4. Customize the content of your custom section by editing the settings and content.

Edit your Shopify page template to include the new section. For example:

				
					{% comment %}
  Add the new section to your page
{% endcomment %}

{% section 'new-section' %}

Making custom sections customizable

By default, custom sections in Shopify are not customizable, meaning the content you add to them will be the same across all pages where the section is used. However, you can make your custom sections customizable by adding editable settings. Here’s how:

  1. Add the necessary code to create editable settings in your custom section file.
  2. Customize the settings to include the content and options you want to make editable.
  3. Save your changes and preview your custom section on your page.
  4. On your page, you can now edit the content and options of your custom section.

Add customizable settings to your new section file. For example:

				
					{% comment %}
  Create a new section with customizable settings
{% endcomment %}

{% schema %}
  {
    "name": "New Section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Section Title"
      },
      {
        "type": "image_picker",
        "id": "background_image",
        "label": "Background Image"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Text Alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "New Section",
        "category": "Content"
      }
    ]
  }
{% endschema %}

{% comment %}
  Add your custom code here
{% endcomment %}

Adding Customizable Dynamic Sections to Your Shopify Pages

  1. Install a page builder app that supports dynamic sections such as Shogun, GemPages, or PageFly.
  2. Open the page builder app and select the page where you want to add the dynamic section.
  3. Select the dynamic section you wish to add from the app’s library of available sections.
  4. Customize the section according to your needs, such as changing the content, layout, and design.
  5. Save the changes and preview the page to see how the dynamic section looks on your Shopify page.

Adding Customizable dynamic sections on your Shopify page:

  1. Open the page builder app and select the page where the dynamic section is located.
  2. Select the dynamic section you want to customize.
  3. Use the app’s editing tools to modify the dynamic section’s content, layout, and design.
  4. Save the changes and preview the page to see how the revised dynamic section looks on your Shopify page.

Examples of dynamic sections on Shopify pages:

  • Product sliders display multiple products at once.
  • Testimonial sections that showcase customer reviews.
  • Image galleries that showcase your products or services.
  • Newsletter sign-up forms that encourage visitors to subscribe to your email list.
  • Promoting or selling a limited-time product requires a countdown timer.

Importance of using custom sections on Shopify pages:

Custom sections provide a range of benefits for your Shopify store. Firstly, they enable you to create unique, branded content for your pages that sets your store apart from competitors.

Secondly, they allow you to easily add and remove content as your needs change without requiring you to edit your entire site.

Thirdly, custom sections help to improve the user experience on your pages by providing engaging and interactive content that keeps customers on your site for longer.

Final Lines

Custom pages and dynamic sections can help you create a more engaging and unique shopping experience for your customers. With Shopify’s intuitive editor and customizable sections, you can make your store stand out without writing code.

Following these steps, you can add customizable dynamic sections to your Shopify page without coding. You can also use this template to customize pages in the future without having to write more code. With this newfound knowledge, you can enhance the look and feel of your Shopify page and make it stand out.