Style settings

The following are standard attributes across all style settings:

Style panel settings combine multiple inputs into a single panel, simplifying the setup of merchant-editable style settings in your theme. By adding a single style panel setting, you get a full set of related style settings that map to CSS properties. Style panel settings are evergreen, which means that additional CSS properties will be added to them over time.

The available types of panel settings are:

• Size
• Spacing
• Layout

More types of panel settings will be introduced in the future.

The style setting panel of type style.size_panel outputs settings to control the width and height of an element.

For example, the following setting generates the following output:

The following properties and corresponding values are supported:

The style setting panel of type style.spacing_panel outputs settings to control the padding and margin of an element.

For example, the following setting generates the following output:

The following properties and corresponding values are supported:

The style setting panel of type style.layout_panel outputs settings to control the direction, positioning, and alignment of items inside a container.

For example, the following setting generates the following output:

The following properties and corresponding values are supported:

When working with style settings, you should familiarize yourself with the following:

• Using style settings
• Accessing style settings
• Applying style settings on elements
• Providing breakpoint-specific values for style settings
• Overriding default style setting values

You can currently use style settings in the following places:

• Sections
• Theme blocks
• Theme settings
• Section-defined blocks

And you'll also soon be able to use them in:

• App blocks

Like other input settings, style settings can be accessed in Liquid using the id attribute of their associated setting. For example, given a setting with an id of "layout":

Style settings can be applied on any given element using the class_list filter in Liquid:

This will apply all of the default values for this style setting to this element, and any merchant edits made in the theme editor.

You can apply style settings on multiple different elements, or apply multiple different style settings to the same element. For example:

If you want to apply all the style settings in a section or block on the same element, you can use the class_list filter directly on block.settings or section.settings:

You can use style settings as many times as you wish, and apply them on any element. However, it’s important to note that where you apply style settings can have an impact.

For example, here are some recommendations on where to apply style settings:

• We recommend applying the style.layout_panel setting on the element that wraps the {% content_for "blocks" %} tag in situations where you want to provide merchants with complete layout flexibility.
• We recommend that the style.size_panel setting be applied on the outermost element if you plan on using it to allow merchants to control the size of blocks. This requirement is due to the fact that some properties, like flex-grow, flex-shrink and flex-basis only have an effect if they are applied on the direct descendants of the flexbox container element, which will typically be the wrapper of the {% content_for "blocks" %} tag.

With these recommendations in mind, here is an example of applying the style.size_panel setting on the outermost element of a theme block:

Style settings support storing values for different breakpoints. You can specify values specific to each breakpoint in the default settings and presets.

To author breakpoint-specific values for styles, you can override a specific style property for a given breakpoint using @media queries

For example, here is how you can update the default value for the padding and margin properties in a style.spacing_panel setting:

In the theme editor, these values will appear as overrides in the sidebar when a merchant switches over to the mobile breakpoint.

You can override default values for style settings in presets. Merchant overrides will be stored in JSON templates.

Here is an example of providing a Columns preset that flows horizontally and a Rows preset that flows vertically:

As you can see, only the flex-direction property needs to be overridden, while other properties will remain set to their default values.

Merchant overrides made in the theme editor will be stored in the corresponding template file that the merchant is editing: