Adding Reusable Dynamic Sections to a Page in Shopify

In 2021, Shopify launched its Online Store 2.0 update, introducing new themes as well as customizable content modules called sections that give merchants much more control over the design of their storefronts. But what about dynamic sections? What makes these different from regular sections within a Shopify theme?

What Are Shopify Dynamic Sections?

Dynamic sections are Shopify’s reusable sections for any page on your store (except gift card and checkout pages) — they are customizable parts of your online store’s content that you can add, reorder, or remove however you want. These might be anything from a slideshow or featured product collection to a gallery, map, newsletter, or more. Meanwhile, static sections are sections on your page that don’t move within the theme layout, such as your header and footer. However, they can still be converted into dynamic sections.

The power behind Shopify’s dynamic sections is their ability to fully tailor the shopping experience to meet the needs and wants of your potential customers. They can be organized to highlight your top-selling items, draw attention to seasonal sales, share customer testimonials, or even tell a captivating brand story — all things that are essential for driving user engagement and increasing your conversion rate.

Adding Dynamic Sections to Your Shopify Store

If you’re interested in trying out Shopify dynamic sections on your ecommerce store, here are a few simple steps to take.

Step 1: Customize your theme

Log in to your Shopify dashboard and navigate to your ‘Themes’ under your ‘Online Store’ in the left-hand navigation sidebar. Under your main theme, click ‘Customize.’

Step 2: Add a new section

Once you’re in the editor, click ‘Add section,’ and you’ll be presented with a list of sections you can add to your page. In this example, we’ve chosen to add a ‘Collection List’ to show off a range of collections from our catalog.

On the right-hand sidebar, you’ll typically see more customization options you can play with to get your new section the way you want it to appear. When you’re happy with it, click ‘Save.’

Brands looking for specific customizations might need to use HTML or Liquid code to create exactly what they want. While this option offers extra flexibility, it often involves a steep learning curve for those who aren’t familiar with code.

Using Shogun to Create Dynamic Sections on Shopify

No web development experience? No problem. Shogun offers two apps that you can use to create custom Shopify sections without writing any code: the Page Builder and the AI Section Builder.

Shogun Page Builder

To create a custom Shopify section with Shogun Page Builder, simply follow these steps:

Step 1: Set up your new section

Head over to the Shogun dashboard and select the ‘Sections’ option in the left sidebar. Then, click on the ‘Create new…’ button to make a new section.

You’ll be brought to the section creator, where you can experiment with Shogun’s great range of elements and other features. For this example, we’ve used these design tools to create a value proposition section. When you’re done, click ‘Publish,’ and the new section will be made available in the Shopify Theme Editor.

Step 2: Add your new section to a page using the Shopify Theme Editor

To add the new section you created in Shogun to your Shopify store, head back to your Shopify dashboard and navigate to ‘Online Store’ > ‘Themes’ > ‘Customize.’

In the Shopify Theme Editor, click ‘Add Section’ and search for your new section by title. Our section was titled ‘Value Props.’ Click on the section and it should appear on your page. Then, drag it to wherever you want to place it on the page.

As you can see, Shogun Page Builder bridges the gap between the default functionalities of Shopify’s dynamic sections and helps sellers create particularly well-designed, conversion-focused ecommerce stores.

Shogun’s AI Section Builder

Creating custom content with the AI Section Builder is even easier:

Step 1: Describe the section you want to make

After downloading and installing Shogun’s AI Section Builder, enter a prompt describing the content you want to make in the text field located at the top of the app. Then, click on the ‘Submit’ button. 

Step 2: Use follow-up prompts to refine the section if necessary

If the output that was generated from your initial prompt isn’t quite what you had in mind, you can just keep entering follow-up prompts to tweak the output until it’s exactly right. 

Also, the app allows you to preview what your section looks like on both desktop and mobile devices before you move forward.

Step 3: Add the section to your storefront

Once you finish designing your section, the next step is to click on the “Add to theme…” button located in the top-right corner of the app. 

You can now access the section you created in Shogun directly through the Shopify Theme Editor, and you’ll be able to add it to any of your pages just like it was one of the sections that came with your theme by default.

Overall, the AI Section Builder is a huge time-saver. You’ll be able to knock out web development projects like they’re nothing, freeing up more room in your schedule for all the other tasks that go into running your online store.