Shopify has recently launched its new edition, bringing with it a suite of exciting updates and features that aim to enhance both the development and user experience. In this article, we’ll explore the highlights of this release, with a special focus on the new free themes—Horizon, Vessel, Saver, Atelier, and Heritage—and the innovative use of Shopify's blocks folder, nested blocks, and the visible_if property.
New Free Themes
Shopify has introduced several new free themes that offer modern design aesthetics and improved customization capabilities. The newly added themes include:
- Horizon
- Vessel
- Saver
- Atelier
- Heritage
These themes are built with flexibility and modularity in mind, allowing merchants and developers to craft engaging shopping experiences with ease.
Enhanced Use of the Blocks Folder
A notable enhancement in this edition is the fully realized usage of the blocks folder. While previous themes like Dawn introduced the folder, it remained largely unused. Now, themes like Horizon and Vessel are making full use of it.
Previously, in the Dawn theme, the blocks folder existed but was empty. Developers could create sections and add blocks directly within those sections. But Shopify’s new themes take this a step further by organizing reusable components as individual block files within the blocks folder. These blocks can be included across different sections, promoting modular development and cleaner code.
A Closer Look: The Product-List Section in Horizon Theme
In the Horizon theme, the Featured Collection section demonstrates the potential of this approach. Rather than offering a simple layout with a collection selector and basic settings, this new section is made up of multiple nested blocks.
This nested structure enables a far more flexible and scalable approach to section design. Developers can now render deeply structured layouts without compromising on maintainability.
Introducing Nested Blocks
One of the most powerful updates is support for blocks inside blocks. This nested block capability wasn’t possible in earlier themes. For example, while a Dawn section like the Image Banner allowed adding blocks such as a heading or button, those blocks couldn’t contain other blocks. That has changed with the new edition.
Now, a header block can include other blocks like a title and a button. This makes it easier to design complex layouts directly from the theme editor without extensive coding.
Leveraging the visible_if Property
Shopify has also expanded the use of the visible_if property in the new themes. This property is used to conditionally display settings based on other selected values. For instance:
- If a user selects the "carousel" layout, carousel-specific settings appear.
- If the layout changes to "editor", only relevant editor settings are shown.This smart filtering of settings makes the theme editor much more intuitive and prevents clutter.
This property has been integrated into both sections and blocks, ensuring a clean and responsive user experience in the theme customizer.
Understanding Presets in New Themes
Each section can also define a preset, which determines the default structure and content when a section is added. For instance, the product-list-grid preset includes:
- A header block (type refers to a file in the
blocksfolder) - A product card layout that includes media and content blocks
- A group block with title, price, and swatch blocks
This allows Shopify themes to provide ready-to-use layouts while maintaining full flexibility for customization.
