Customization Made Easy: How to Build Your First Shopify Section Block

Customization Made Easy: How to Build Your First Shopify Section Block

Shopify sections blockAs a web designer, you want to give your clients the greatest opportunities to personalize their webstore. When we empower merchants to take control of their site, a world of new possibilities can open up. With blocks, you can move into a curator role, and give your merchants the choice to decide what kind of content they host and where it appears.

In this tutorial, we will look at some practical ways to build blocks into your section files. We’ll look at two functional examples of blocks, and explore the different ways you can unlock their potential.

You might also like: Introducing Sections for Shopify Themes.

What are blocks?

We can think of blocks as sections within sections. When we looked at how to create sections, we saw that sections can be moved around a page. What makes blocks different to sections, is that elements can be moved around within a section.

What makes blocks different to sections, is that elements can be moved around within a section.

A range of different types of blocks can be added to sections, and the positions of these blocks can be changed, all from the Theme Editor. A block could be an image, a video, custom text, or any of the input setting types options seen below.

Value

Application

text

Single-line text fields

textarea

Multi-line text areas

image_picker

Image uploads

radio

Radio buttons

select

Selection drop-downs

checkbox

Checkboxes

range

Range sliders

 

Now, your clients can move elements around a section, instead of being confined to a specific layout. They can add elements based on the rules you set up. This adds yet another layer of personalization that will further empower your clients to create their ideal store.

Blocks can be used in dynamic and static sections, and it’s important to consider which types of blocks would work in certain areas. An option to add a newsletter block might not be suitable in a dynamic section, for example, but an option to add a custom text block could be useful in this context.

Because blocks can be repeatable, it’s crucial to set limits where appropriate, so you can avoid any user-interface pitfalls. For example, you could create a block with video content. While it could be tempting to allow a large number of video blocks to be added to this section, doing this would impact site-loading times, as well as clutter the page. Instead, it would be wiser to limit this to just having one video. With great power comes great responsibility!

Because blocks can be repeatable, it’s crucial to set limits where appropriate, so you can avoid any user-interface pitfalls.

Adding blocks to a dynamic section

The first section we’ll look at is a dynamic section with blocks for call to action buttons, which can be moved around. This could be helpful if your clients need to give different options to customers, for example downloading a podcast or an eBook.  

In the sample below, you can see the elements you’d like to output: a heading for the overall section, with block variables for a link and link text.

As we saw with sections, block settings are added to theme files, and then defined within the schema tags. With blocks, the syntax of these settings (or Liquid variables), look like {{ block.settings.id }} where ID is referenced in the schema section.

So for our block, which has a link and link text, we will see:

What’s also very important is that the container is wrapped in a for loop, which iterates through each block in section.blocks. This will allow the blocks to render correctly on the Theme Editor. You can see this below:

The schema area of the section file uses JSON to define the different values of each setting and block. This works just like we saw before when we looked at building a section, but with a few new additions.

Within the main schema settings we can assign the max number of blocks in the section. I have set this to three, but it can be any number. Depending on the type of output, you may want to limit or “cap” the possible number of blocks differently, so that a page does not get cluttered.

Below this, because it’s a dynamic section, we have presets, which will allow this section to be added to the index page. We can define how many blocks appear by default, by adding blocks within the presets. This means two call to action buttons will appear, and if you remember, I set the max to three, so an additional block can be added.

So let’s take a look at the Theme Editor, and see how this looks when we try it out:

Shopify sections block: Set max blocks

You might also like: How to Create Your First Shopify Theme Section.

Adding blocks to a static section

By adding different options to blocks, web designers can really take customization to another level. This means that clients can choose different types of blocks within a section, and rearrange where these blocks appear.

Having this kind of flexibility could be especially helpful when looking to customize a fixed or static section, such as a footer. Your clients are now free to add video, text, images, and more, all within the same section, as well as change the sequence of these elements. Before blocks, if your client needed to make this kind of change, it would require digging into the code. But now, we can achieve all this from the Theme Editor. 

Before blocks, if your client needed to make this kind of change, it would require digging into the code. But now, we can achieve all this from the Theme Editor. 

By making use of the case/ when control flow tags, we can set-up different options for including types of output. For example, if we wanted our footer to have block options for custom text, social media icons or a newsletter sign up form, the code for these block options would look like this:

As you can see above, we are again wrapping the blocks in Liquid logic tags, to ensure they render on the Theme Editor, but we’re also pulling in content from outside the footer file. In the case of the newsletter and social links, we’re including code from snippets within the theme files. This means you can add functionality to blocks, which exists within your snippets folder.  

We can also create conditions for layout using control flow tags, so that you can define exactly how the blocks will appear as they are added. In this example, I will be setting the max amount of blocks to six, and I’m assigning a specific column width to each possible number of blocks.

Within the schema section, we can set limits on an individual block level. If your client added multiple versions of their social icons to the footer, it could be confusing to customers, so it is possible to avoid this by adding a limit of one to this specific block. The merchant will still be able to adjust where the social block appears within the section, but only one version of the block can be added. This is what adding this specific limit would look like:

The full section file for this footer would look like this:

Once this section has been included in theme.liquid, the output on the Theme Editor would look like this:

Shopify sections block: Set limit on block level

You might also like: The Essential List of Resources for Shopify Theme Development.

Helpful links for further reading:

If you’re keen to learn more about sections and blocks, take a read through some of these resources:

With great power, comes great responsibility

As you can see, using blocks can give clients a lot of control over how their pages look and feel.

It’s worth keeping in mind, however, the possible risks of repeating blocks, especially for elements such as images and videos. If a merchant over-repeats these, it could result in slow page loading times and a poor user-experience, which could have a negative effect on overall conversions.

But by implementing blocks carefully, and considering their context, you can create a winning formula for your clients.

What types of sections you are designing? Let us know in the comments section below.

About the Author

Liam is a Partner Education and Front End Developer Advocate at Shopify. He's passionate about promoting community engagement and developing learner resources. Whenever he’s not reading about code you can catch Liam making friends with cats and collecting records.

Grow your business with the Shopify Partner Program

Learn more