When you're designing a theme, you should consider when to provide functionality in a section or a block. Sections and blocks are modular components that give merchants the opportunity to customize and extend their theme. Merchants can add and remove sections and theme blocks, adjust section and block settings, and introduce [app blocks](/docs/storefronts/themes/architecture/blocks/app-blocks) and [metafields](/docs/api/liquid/objects/metafield).

These guidelines apply to [Online Store 2.0](/docs/storefronts/themes/best-practices/version-control) themes, which use [JSON templates](/docs/storefronts/themes/architecture/templates) and [section groups](/docs/storefronts/themes/architecture/section-groups). You can't add or remove [static sections](/docs/storefronts/themes/architecture/sections#statically-render-a-section) from Liquid templates or layouts.

## Sections

[Sections](/docs/storefronts/themes/architecture/sections) are available on all pages.

When building theme templates, you should ensure that your template's default content is available in a main template section, and that sections can be added, removed, and reordered. You can use sections to do the following:

* To add, remove, or reorder content at the template or section group level
* To control theme settings that are scoped to the entire section's layout and content

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/modularity-by-stacking.png" alt="Merchants can stack multiple sections together to populate a template." width="60%"></div>

## Blocks

You should provide [blocks](/docs/storefronts/themes/architecture/sections/section-schema#blocks) to add, remove, or reorder content at the section level, or when it enhances the usability of a section.

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/modularity-by-blocks.png" alt="A section can contain multiple blocks to make it more customizable."></div>

Keep the following principles in mind when developing blocks:

* Ensure that the [theme settings](/docs/storefronts/themes/architecture/settings) are scoped to the block.
* Choose a [block layout](#block-layouts) that is appropriate for the content, and ensure that your blocks flow logically regardless of block type or sequence.
* Select an appropriate [flexibility level](#blocks-and-flexibility) to introduce using blocks.

### Block layouts

When designing the grid layout for your section, ensure that your blocks follow a logical and intuitive reading flow regardless of the block types and block sequence.

Consider the following when determining how blocks should flow in a section:

* Stack blocks vertically for text-based content that requires hierarchy.

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/vertical-stack.png" alt="Blocks can be stacked vertically to indicate content hierarchy."></div>

* If you don't need to show hierarchy, then either stack blocks horizontally or create a grid that adapts to the block types that are available in the section.

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/horizontal-stack.png" alt="Blocks can be stacked horizontally and wrap on multiple lines."></div>
<div style="text-align: center"><img src="/assets/themes/templates-tutorial/adaptive-stack.png" alt="You can create a grid that adapts to the block types that are available in the section."></div>

* When stacking blocks horizontally, either ensure that the section grid can wrap on several lines or offer horizontal sliding controls to maintain a comfortable block width. Ensure your section grid is responsive and that blocks can reflow depending on screen size.

    <table style="border-collapse: collapse; border: none;">
      <tr style="border: none;">
        <td style="border: none; vertical-align: middle;"><img src="/assets/themes/templates-tutorial/check.png" alt="do"></td>
        <td style="border: none;"><img src="/assets/themes/templates-tutorial/wrap-blocks.png" alt="Blocks wrap on several lines."></td>
      </tr>
      <tr style="border: none;">
        <td style="border: none; vertical-align: middle;"><img src="/assets/themes/templates-tutorial/check.png" alt="do"></td>
        <td style="border: none;"><img src="/assets/themes/templates-tutorial/sliding-controls.png" alt="Add sliding controls to move between blocks in narrow viewports."></td>
      </tr>
      <tr style="border: none;">
        <td style="border: none; vertical-align: middle;"><img src="/assets/themes/templates-tutorial/x.png" alt="don't"></td>
        <td style="border: none;"><img src="/assets/themes/templates-tutorial/blocks-no-wrap.png" alt="Avoid squeezing blocks to fit in narrow viewports."></td>
      </tr>
    </table>

* Don't rely on a specific block type or sequence to design a layout, and don't use a specific block order to change the grid layout.

    <table style="border-collapse: collapse; border: none;">
      <tr style="border: none;">
        <td style="border: none; vertical-align: middle;"><img src="/assets/themes/templates-tutorial/check.png" alt="do"></td>
        <td style="border: none;"><img src="/assets/themes/templates-tutorial/three-col-layout.png" alt="Enforce expected layouts by grouping settings into a single block."></td>
      </tr>
      <tr style="border: none;">
        <td style="border: none; vertical-align: middle;"><img src="/assets/themes/templates-tutorial/x.png" alt="don't"></td>
        <td style="border: none;"><img src="/assets/themes/templates-tutorial/reliance-on-block-sequence.png" alt="Don't rely on a specific block type or sequence to design a section layout."></td>
      </tr>
    </table>

<table style="border-collapse: collapse; border: none; margin-bottom: 0">
    <colgroup>
       <col span="1" style="width: 40%;">
       <col span="1" style="width: 20%;">
       <col span="1" style="width: 43%;">
    </colgroup>
  <tr>
    <td style="border: none; text-align:center"><img src="/assets/themes/templates-tutorial/check.png" alt="do"></td>
    <td style="border: none;"></td>
    <td style="border: none; text-align:center"><img src="/assets/themes/templates-tutorial/x.png" alt="don't"></td>
  </tr>
  <tr>
    <td style="border: none; text-align:center" colspan="3">
      <img src="/assets/themes/templates-tutorial/block-order-and-layout.png" alt="Don't use a specific block order to change the grid layout.">
    </td>
  </tr>
</table>

### Blocks and flexibility

To balance simplicity and flexibility, you should carefully consider when to add blocks and what each block should contain. Too many blocks creates clutter and complexity. You can use the following principles to understand how to define your blocks.

* Group settings into blocks to simplify the editing experience and declutter the editor sidebar. For example, you can nest theme settings to customize an image block inside of the block.
* When elements follow a specific hierarchy, group elements together and optionally allow block insertion points before and after. For example, you might create a single block that controls cart page line items.
* Avoid providing blocks that are too granular. Granularity adds complexity to the theme code and to the merchant editing experience. For example, you should group the author, date, and comments into a single block or into settings, rather than introducing these attributes as three separate blocks.

<table style="border-collapse: collapse; border: none; margin-bottom: 0">
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 36%;">
       <col span="1" style="width: 33%;">
    </colgroup>
  <tr>
    <td style="border: none; text-align:center"><img src="/assets/themes/templates-tutorial/check.png" alt="do"></td>
    <td style="border: none;"></td>
    <td style="border: none; text-align:center"><img src="/assets/themes/templates-tutorial/x.png" alt="don't"></td>
  </tr>
  <tr>
    <td style="border: none; text-align:center" colspan="3">
      <img src="/assets/themes/templates-tutorial/granularity.png" alt="Choose the right level of granularity for blocks in your sections.">
    </td>
  </tr>
</table>

### Considerations for app blocks

Merchants can add [app-provided blocks](/docs/apps/build/online-store/theme-app-extensions) to their themes. As a theme developer, you need to [add support](/docs/storefronts/themes/architecture/blocks/app-blocks) for these types of blocks to your sections. Consider the following when deciding whether to support app blocks in a section:

* Provide app blocks in sections that have clear use cases for layering additional conversion tools, or purchase decision factors. For example, you might want to include an app block with the product information on the product page, or in the cart template.
* Always consider antifragility and the section’s purpose when considering extending a theme using app blocks. Would the layout break easily when inserting unexpected block types? Would it require adding edge-case CSS styles to handle those blocks? Would it make the section’s purpose vague, or inconsistent? If the answer is yes to these questions, then avoid app blocks.

## Theme settings

Use [theme settings](/docs/storefronts/themes/architecture/settings) to provide different look and feel options. Theme settings can be applied at the section, block, and theme levels.

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/settings-flexibility.png" alt="Settings can provide different look and feel options."></div>

### Metafields

Shopify provides various standard [metafields](/docs/api/liquid/objects/metafield) that can fit your target segment. Review what’s available and consider which use cases make sense for the theme. For example, you might include either sections or blocks for a care guide or size chart metafield. These metafields, when referenced as [dynamic sources](/docs/storefronts/themes/architecture/settings/dynamic-sources), update to reflect their context, such as the product that is being rendered.

<div style="text-align: center"><img src="/assets/themes/templates-tutorial/block-settings-and-metafields.png" alt="Use metafields to add dynamic information to your theme."></div>

When building metafields into your theme, consider building specific blocks for metafields. You can also audit ecommerce websites for your target segment, and analyze how content is presented to identify opportunities to design specific components. For example, you might want to use metafields to create a well-formatted information list for electronic products, or to add information about a coffee blend and origin.