Adding a Custom Liquid Section to Shopify Like a Pro

An effective way to set your store apart is to create your own Shopify sections rather than rely on the cookie-cutter options that come with your theme.

Below, we’ll show you how to add custom sections using the Liquid templating language.

How the Pros Use Shopify Liquid Sections to Customize Their Store

Sellers who make use of Liquid Shopify sections to bring their store to life definitely have an edge over the competition. These sections allow shoppers to feel a level of personal touch that stores using a generic template might not have. But what exactly are these sections, and what can you do with them?

Liquid ‘Sections’ are customizable building blocks within a Shopify theme. They’re essentially modular components that come together to enhance the aesthetic and functionality of your store. Just like with other coding languages, Liquid lets you customize the elements that make your store what it is. 

Adding a Liquid Section to Your Shopify Store Step-by-Step

Let’s go through the step-by-step process of adding a Liquid section to your Shopify store. If you’re confident in your ability to code or are willing to learn Shopify Liquid, it can be a great way to take your ecommerce site to the next level.

Step 1: Navigate to Your Online Store

To start, log in to your Shopify dashboard and click on ‘Online Store’ > ‘Themes’ in the left-hand navigation menu. Click ‘Customize’ and you’ll be led to your website.

Step 2: Write Your Liquid Code

Add a section using the button on the left-hand navigation bar and search for ‘Custom Liquid.’

 You’ll see a textbox on the right-hand side where you can enter all sorts of liquid code to your liking. 

Liquid code will help you create content for this section, whether text, products, collection templates, images, or other custom elements. If you’re completely new to Liquid, Shopify has some basic tutorials and examples you can use, or you can look at our Shopify Liquid Tutorial to get started.

For example, here is Liquid for a custom hero that can be applied to collection pages:

<div class="collection-hero">
    <div class="collection-hero__intro">
      <h1 class="collection-hero__title">
          Browse {{collection.title}}
      </h1>
      <div class="collection-hero__description">
          {{collection.description}}
      </div>
    </div>
    {% if collection.image %}
        <div class="collection-hero__image">
            <img src={{ collection.image | image_url }} alt="{{collection.title}}" />
        </div>
    {% endif %}
</div>

Using Shogun to Create Sections on Shopify

Although Liquid gives you a lot of flexibility, you may be looking for a way to create your own sections on Shopify that doesn’t require any coding.

In that case, Shogun actually offers two apps that can help you out here: the Page Builder and the AI Section Builder.

Shogun Page Builder

Shogun Page Builder provides you with pre-designed blocks of content called elements. These elements can be combined into one custom section, and each element is highly customizable, allowing you to set up just about whatever kind of content you want.

For example, if you want to feature a certain product on one of your pages, you can simply place a Product Box element onto the editor canvas.

Other elements can then be added within the Product Box element, such as a Title element for displaying the name of the product, a Description element for providing more information, an Image element for showing what the product looks like, and a Columns element for organizing the layout just the way you want it. Again, each element has myriad customization options (e.g., for the Columns element, you can adjust the column widths, column heights, background color, etc.).

Also, with the Theme Sections feature, you can build sections with Shogun’s design tools and then add them to your store through Shopify’s built-in theme editor.

This feature is especially convenient for when you want to add the same section to many different pages. For example, you could create a ‘Shop by Category’ section in Shogun and then add it to your Shopify theme’s product page template — the section would then immediately appear on every page that happens to use this template.

Not custom enough? Shogun Page Builder also lets you create reusable Custom Elements from the ground up using coding languages like Liquid, CSS, and HTML. At this level, the customization is endless, and developers can craft bespoke elements that break free of all generic templates.

Shogun’s AI Section Builder

If you’re looking for the absolute easiest way to create custom sections for your Shopify store, then you should certainly check out Shogun’s AI Section Builder. 

With this app, you just need to describe the section you want, and then it will appear right in front of you. Here’s how it works:

Step 1. Enter your initial prompt

After downloading and installing Shogun’s AI Section Builder, enter a description of the content you want into the text field at the top of the app. Then, select ‘Submit.’

Step 2. Enter follow-up prompts if necessary

The output generated from your initial prompt may very well be exactly what you wanted. But if it’s not perfect yet, you can submit follow-up prompts until it’s just right.

Step 3. Add the new section to your Shopify theme

Once your section is ready, click on the ‘Add to theme…’ button. 

After that, you’ll be able to add the section to any of your pages directly through Shopify’s built-in theme editor.

As you can see, Shogun’s AI Section Builder truly does all the hard work for you. Development tasks that may have taken hours before can now be completed in a couple of minutes. Just imagine what you’ll be able to accomplish with all that extra time.