Sections and Blocks​

When creating a theme, decide whether to use Sections or Blocks to add features. Sections and Blocks are modular components that allow merchants to customize and expand their themes.

Merchants can add and remove Sections and Blocks, adjust their settings, and incorporate app blocks and metafields.

These guidelines apply to themes using JSON templates in Online Store OS2.0 and OS2.1. You cannot insert or delete static sections in Handlebars templates.

Sections​

Sections can be used on any page.

When building a theme template, ensure the default section content is usable and that sections can be added, removed, and reordered.

Sections let you:

• Add, remove, or rearrange content at the template level
• Input settings for all sections within a section

Blocks​

To make a section more user-friendly, add blocks at the section level to adjust content.

When developing blocks, keep these points in mind:

• Limit theme settings to that block.
• Choose suitable block layouts and ensure blocks display logically.
• Select the right level of block flexibility.

Block Layouts​

When designing a grid layout for your section, ensure your blocks follow a logical and simple reading flow.

Consider these factors for block arrangement:

• For text-based content needing a hierarchy, stack blocks vertically.

• If no hierarchy is needed, stack blocks horizontally or create a grid to fit the block types in the section.

• When stacking blocks horizontally, ensure the grid can wrap to multiple lines or provide horizontal scrolling for comfortable widths. Make sure your grid is responsive and blocks can rearrange based on screen size.

• Don’t rely on specific block types or orders to design layouts or change grid layouts.

Blocks and Flexibility​

To balance simplicity and flexibility, decide carefully when to add blocks and what each block should include. Too many blocks can cause clutter. Follow these guidelines to define your blocks:

• Group settings into blocks to make editing simpler and organize the editor sidebar. For example, nest theme settings to customize image blocks within a block.
• Group elements with a hierarchy together, allowing blocks to be inserted before and after if needed. For example, create a block that controls cart page line items.
• Avoid making blocks too detailed. More detail adds complexity to theme code and editing experience. For example, group author, date, and comments into a single block or setting instead of three separate blocks.

Considerations for App Blocks​

Merchants can add app-provided blocks to their themes. As a theme developer, support these types of blocks within your sections. When deciding whether to support app blocks within sections, consider the following:

• Provide app blocks in sections with clear use cases to layer other conversion tools or purchase decision factors. For example, include app blocks with product information on product pages or cart templates.
• Always consider compatibility and the section's purpose when adding app blocks. Will the layout break with unexpected block types? Will additional CSS be needed for these blocks? Will it obscure the section's purpose? If yes, avoid using app blocks.

Theme Settings​

Use theme settings to provide different appearance options. Theme settings can be applied at the section, block, and theme levels.

Metafields​

SHOPLINE offers various standard metafields for your target market. Review the available content and consider which use cases are suitable for the theme. For example, include care instructions or size charts as sections or blocks. When used as dynamic sources, they update to reflect their context, such as the product being displayed.

When using metafields in your theme, consider building specific blocks for metafields. Check e-commerce sites aimed at your audience and analyze how content is shown to find opportunities for designing specific components.

For example, use metafields to create well-organized information lists for electronics or add details about coffee blends and origins.