Improving The Online Store: New Style Settings & Features For Theme Blocks — Now In Developer Preview

Since Summer Editions 2023, our team has been reimagining the Online Store experience with a goal of making it easier for theme developers to provide more storefront customization capabilities to merchants.

Today’s release introduces new Style settings, which lays the groundwork needed to move towards Shopify’s vision of flex sections – a way for merchants to easily drag, drop, resize, and arrange different components and sections in their themes.

New Style Settings for Themes

We’re introducing a new settings category called Style settings. Style settings map directly to CSS properties and allow merchants to adapt values for different breakpoints. This means that merchants can now easily customize the appearance of their site for mobile without needing a separate setting for each breakpoint.

Shopify will offer a wide set of style settings via Style panels, starting with Layout, Size and Spacing, with more coming soon. By using the Shopify-provided style panels, theme developers get a full set that are merchant-customizable. Developers won’t have to manually author each individual setting themselves, making it easy to provide more styling flexibility to merchants to better express their brand. If you’re familiar with WordPress, it is similar to what the Kadence theme offers (check here for examples)

Extending Theme Blocks Functionality with Block Targeting & Static Blocks

At Winter Editions 2024 we launched theme blocks in developer preview which introduced the ability for blocks to be more generic, and reusable in a store’s theme. Today we’re extending what you can do with reusable blocks, giving developers more control over how blocks can be used by merchants, with block targeting and static rendering. 

Block targeting lets theme developers specify which theme blocks merchants can add in a given section or parent block. For example, a slideshow section that only accepts slide blocks. This gives theme developers more control of where blocks can be used while keeping the flexibility and reusability that theme blocks provide.

Theme blocks can now be statically rendered, so that they can’t be reordered or deleted by merchants. This will allow theme developers to build layouts with specific behaviors that merchants cannot change. For example, conditionally rendering a “view all” button that only shows when there are more products in the collection than displayed on the page or the ability to make it so that certain elements are always present, like search filters on the collections page.

When to adopt these features and how to access the developer preview

This functionality isn’t ready to be adopted into your existing themes yet. The goal of the developer preview is to let you familiarize yourself with the new platform features and give you the opportunity to share feedback with us as we ship additional capabilities. 

If you haven’t already checked out Theme blocks, follow the developer preview steps to get access to this and the new Style settings. If you already have the theme blocks beta flag enabled, you will have access to these new features. After you’ve enabled the developer preview, you will be able to test out these features in a reference theme that you can upload to your development store.

A look at what’s to come 

More Shopify provided Style settings & the ability to create your own

We plan to cover the most widely used CSS properties via additional provided panels such as typography, background, border, and effects. Developers will also be able to create their own bespoke style settings by manually connecting Style settings to CSS properties and letting merchants have control over styling.

Data sources for Theme Blocks

As we move in the direction of more generic reusable blocks and more layout flexibility, we want to simplify data connections for theme blocks. Soon, blocks will have the ability to pass resources like products, collections and metaobjects to their children so that it’s simple to hook up data even where we have custom layouts with lots of nesting.

Powerful drag-and-drop layout editing in the Theme 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.

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.

This article originally appeared on Shopify Web Design and Development and is available here for further discovery.