Shopify’s Summer Edition 2024 introduces several exciting updates to enhance theme customization and flexibility. Among these updates are the new style settings for themes, which include layout flexibility, opinionated sections with static blocks, and block targeting.

1. New Style Settings in Shopify Summer Edition 2024

We’re introducing a new category called Style Settings. These settings correspond directly to CSS properties, enabling merchants to adjust values for different breakpoints. With Style Settings, merchants can easily customize their site’s appearance for mobile devices without needing separate settings for each breakpoint.

1.1 Layout Flexibility

The new layout flexibility allows for greater customization of theme layouts directly from the theme editor. This includes the option to manually alter the theme code if you want to change padding, margins, and other spacing settings. You may make responsive and dynamic designs that work on a variety of screens and devices by utilizing these new style parameters.

1.2 Starting Sections with Static Blocks

Shopify now offers opinionated sections with static blocks, enabling you to create predefined sections with fixed content blocks. These blocks provide a consistent structure across your theme, making it easier to design and maintain a unified look and feel. The use of static blocks also simplifies the process of customizing sections, allowing for quick updates and adjustments.

1.3 Block Targeting

Block targeting is a powerful feature that lets you apply styles to specific blocks within a section. This means you can customize individual elements without affecting the entire section or layout. This level of granularity ensures that your design remains precise and consistent, enhancing the overall user experience.

Getting Started with Flex Sections

To get a head start on understanding flex sections, you can create a developer preview store and start experimenting. Here’s a step-by-step guide:

Create a Developer Preview Store:

Add a development store through your Shopify Partner Dashboard.

Select the development preview you want and add some test data.

Theme:

If you have your own development store, you’ll find a dedicated “Blocks” folder inside the code editor in any theme.

Build from scratch:

Create a custom section with schema and presets for blocks.

Define different types of blocks (e.g., image, text, button) and use them within your custom section.

Experiment with multilevel nesting to understand the flexibility offered by the new system.

Add Style Settings:

Incorporate style settings to control the appearance of your sections and blocks.

Test different configurations to see how they impact the theme’s look and feel.

Shopify will offer a wide range of style settings through Style Panels, starting with layout, size, and spacing, with more options coming soon. By utilizing the Shopify-provided Style Panels, theme developers gain access to a comprehensive set of merchant-customizable options. Developers won’t need to manually create each individual setting, making it easier to provide merchants with greater styling flexibility to better express their brand.

Shopify’s new style settings and developer preview features are set to transform theme development, offering increased flexibility and customization options.

Happy coding, and see you in the next update!