Sections and blocks

Themes use sections to create your ideal layout. Most sections are made up of blocks that serve a specific function, such as headers, text, single images, a collage of images, or links. Using sections and blocks in your templates provides more flexibility in how you arrange your store's content, enabling you to control the look and feel of your online store without the need to edit code. Each template can have up to 25 sections.

Each section has a specific variety of blocks that you can add to it. You can add up to 50 blocks per section. Which sections and blocks are available depends on your theme. For more information about what options are available to you, refer to your theme documentation.

Some sections have limits on the number of blocks that you can add, or limits on the number of blocks of a certain type. For example, the Image with text section can only display the blocks specified by the theme designer for your theme. In Dawn, the free Shopify theme, you can add only one of each of the following blocks:

  • a heading
  • a paragraph
  • a button

You can further customize the section by editing its Settings to include an image and choose the alignment, size, background color, and what loads first when customers visit your online store.

If the sections that you add to your store layout don't include the settings or options that you need, then you can edit your theme code or contact your theme's developer for support.

Customize your theme templates with sections and blocks

When you open the theme editor, your store's home page loads by default. You can use the dropdown menu to select a different template, or use the search bar in the template dropdown to search for a specific page type. Selecting a template loads it into the theme editor, and any changes you make are previewed in the editor as you make them.

Add a section

Add a new section to any page in your online store.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Select a template from the drop-down menu.
  4. Click + Add section, and either select a new section from the list or use the Search bar to search for a specific term.
  5. Click the new section to edit the blocks within the section.
  6. Optional: Click and drag the ⋮⋮ icon next to a section to rearrange the sections on your page.
  7. Click Save.

Edit a section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. From the dropdown menu, select the template that contains the section that you want to edit.
  4. Click a section to load the content into the preview window and access the options available to you.
  5. Optional: Click individual blocks to edit the blocks within the section.
  6. Click Save.

Duplicate a section or block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. From the dropdown menu, select the template that contains the section or block that you want to duplicate.
  4. Click a section or block that you want to duplicate.
  5. Click the ... button beside the section name in the sidebar and then click Duplicate.
  6. Click Save.

Remove a section or block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. From the dropdown menu, select the template that contains the section that you want to edit.
  4. Click a section to load the content into the preview window and access the options available to you.
  5. Click the eye icon to hide or unhide a section or block.
  6. Click Remove to delete a block or section.

Some sections have fixed block types and limits. If a limit exists for a particular section or block, then the interface tells you you've used X out of X blocks available. If you've used the maximum number of blocks, then you won't be able to add any additional blocks until you've deleted an existing one.

Working with blocks

Blocks are customizable modules that make up the sections in your page templates. You can use blocks to add text, images, links, buttons, and more.

Shopify themes have sections and blocks that you can customize. Some sections have fixed block types, which means that you can only choose from the blocks made available to that section by the theme designer. Other sections allow you to select any block, but limit the total number of blocks that you can add to the section. If your section reaches the maximum number of blocks available, then a message displays the limit reached, and the + Add block option is greyed out until an existing block is removed.

Add a block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. From the dropdown menu, select the template that contains the section that you want to edit.
  4. Click a section to load the content into the preview window and access the options available to you.
  5. Click + Add block and select a new block, or click the Search bar to enter a search term.
  6. Click Save.

Using metafields and metaobjects with dynamic sources

Metafields and Metaobjects allow you to display dynamic information on your online store. If you have a theme that supports metafields, then you can connect a metafield to a section or block in the theme editor.

For example, a candle seller might want to display burn times for each type of candle available. After setting up a product metafield for burn time, the seller can add a block for burn time to their product template and then connect it to the product metafield. After setting up a collection metafield for a page that lists burn times, the seller can add a block to their collection template and then connect it to the collection metafield.

You can display dynamic information in your online store by adding sections or blocks that can use dynamic sources. Dynamic sources can be used in any template, section, or block that displays compatible resources (product, collection, page, blog and blog post). You need to add your metafield before you can connect it in your templates. Refer to Dynamic sources for more information about using metafields and metaobjects via dynamic sources in your theme.

After you complete the setup process, follow these steps to connect dynamic sources to blocks or settings in your theme:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. From the dropdown menu, select the template that contains the section that you want to edit.
  4. Click an existing section to load the content into the preview window and access the options available to you, or click + Add section.
  5. Click the dynamic source button and then connect a dynamic source:
    Connect dynamic source
  6. Click Save.

Dynamic source selector

Dynamic source selector

The dynamic source selector can be used to easily connect the right dynamic source directly in the online store editor. The following are some key features of the selector:

  • You can reference dynamic sources from various resources, where applicable. For instance, if you are connecting a setting to a block that is connected to both a product resource and a page resource, then you can specify if you want to search for metafields associated with either the product or the page resource. This dropdown is at the top of the dynamic source selector.
  • Search and Filter: The Dynamic Source Selector provides a search and filter functionality that helps you quickly find the metafield you need.
  • Category Metafields Selection: The selector enables you to choose category metafields. These are additional attributes that become available when you assign a product category to a product. Accessing these metafields allows you to connect dynamic sources to any relevant fields on the underlying attribute metaobject.
Ready to start selling with Shopify?Try it free