Getting a basic storefront up and running is easy. Building a storefront that matches the precise look and feel a merchant wants for their brand, or adapting the style and design as the business grows, is where things start to get complicated. In 2024, we are making substantial investments to enhance storefront customization for merchants and developers. With increased layout flexibility and finer-grain control over styling, developers will be able to empower merchants to build the exact vision they have for their brand.
In the Summer 2023 Edition, we shared our vision for the future of the Online Store experience with Flex sections, a way for merchants to easily drag, drop, resize, and arrange different components and sections in their theme. Today, we’re sharing our first milestone towards that future with the developer preview of theme blocks.
What’s available in developer preview today
Theme blocks allow you to define a block once and then reuse it across sections to eliminate redundant work and coding and make them more consistent. Theme blocks also support nesting, up to 8 levels deep. This allows for more flexibility in how merchants customize sections and lets them make more granular edits to their layout.
To create a theme block all you need to do is add a ‘block.liquid’ file to the /blocks folder of your theme. Sections and blocks can opt-in to receiving theme blocks as children in their schema, and render them by using the new {% content_for blocks %} liquid tag. Similar to presets in sections today, block presets allow you to define as many starting points for each individual theme block as you want, including multiple configurations of nested blocks. This makes it easy to create many starting points reusing the same blocks.
Pulling theme blocks out of sections and giving them their own home is step one in the vision towards a more flexible editing experience, but this release is also meaningful enough on its own so we wanted to share it early. It follows more of the don’t repeat yourself principles we’re all used to while giving editor users more flexibility.
Access the theme blocks developer preview
For details on how to access Theme blocks, follow the Developer preview access steps in the theme Blocks developer docs. After you’ve enabled the preview, you will be able to test out theme blocks in a reference theme, that you can upload to your development store.
When to adopt theme blocks
The release of theme blocks will lay the foundation for us to ship additional capabilities for blocks over the next few months, this functionality isn’t ready to be incorporated into your existing themes just yet. The goal of this developer preview is to let you get familiar with the feature and have the opportunity to share your feedback with us ahead of it entering production this year.
Build with us
Stay up-to-date with all the upcoming changes via the following:
Our 2024 plans
Looking forward to the next 12 months, we are working towards a new Online Store editor experience that includes the Flex sections functionality you saw last year and some powerful no-code features for advanced styling and customization that make granular edits to layout, typography, color and size, across breakpoints easier than ever.
Let’s take a high level look at our goals for 2024.
Mission 1: Introduce more layout flexibility
What’s next with Theme blocks
The theme blocks developer preview is the first step in our journey to achieve the long term vision that all blocks in your theme live in the blocks folder. We are thinking about how we will introduce a better way to organize and present relevant blocks to merchants. As well as the ability to incorporate special behaviors like conditional rendering, repeating blocks, and more that will give developers more control over the structure and order of blocks.
Powerful drag-and-drop layout editing in the Editor
For merchants who don’t code, Flex sections will make it easier for them to customize their layouts by simply dragging-and-dropping to re-size, group and edit content. We’ll make it easier to customize common layout properties both in preview and in the sidebar.
Mission 2: Bring more styling flexibility
We want merchants to be able to optimize the look and feel of their storefront for their buyers, across devices. We are planning on introducing new platform-provided styling capabilities to themes. These new capabilities will make it easier for merchants to precisely control the look and feel of their storefront for different viewport sizes directly in the theme editor, without writing any code.
Developers will have the ability to specify the breakpoints for style customizations and select the style properties that merchants can edit for their sections and blocks. Shopify will provide advanced controls for customizing style properties like layout, typography, backgrounds, borders, and more. Developers and merchants will also have the ability to create style variants, which will help merchants quickly change the look and feel of sections and blocks, either locally or across their entire storefront.
We shared a sneak peak of these platform-provided styling controls last summer with Flex sections, which enables powerful layout editing capabilities, and we’re excited to share more details in the near future.
Mission 3: Easier to design sections for custom content
Last year we rolled out metaobjects to give merchants the ability to build richer custom content models. However, it’s still difficult to design the right layout and style for this content in the theme editor. With nested theme blocks, it will be easier for merchants to design their own layouts for their content models, without having to use code.
Follow along as we ship new features
We’re incredibly excited about our plans for the theme platform in 2024. To help ensure this experience is incredible, we need to partner with the many incredible entrepreneurs and developers like yourself, to help us shape the vision. We invite you to follow along and join the conversation by sharing your feedback as we ship new features. You can find us in the Shopify Partners Slack or join the conversation in our GitHub discussion board.
