Sections and blocks

You can use sections in your theme to create the layout that you want for your online store. Most sections are made up of blocks that have a specific function, such as text, buttons, single images, a collage of images, or links. Using sections and blocks in your templates provides flexibility in how you arrange your content, enabling you to control the style 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. The sections and blocks that are available depends on your theme. For more information about which 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 displays only 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 to the Image with text section:

• a Heading block
• a Text block
• a Button block
• a Caption block

You can further customize the Image with text section with the following options:

• add an image and set its size
• select an animation style for your image
• choose the alignment for the content of your blocks
• set a color scheme for the section

If you reach the limit on the number of blocks that you can add, then the Add block option in the theme editor is greyed out and you can't click or tap it. For example, in the Image with text section in Dawn theme, if you've added a Heading block, a Text block, a Button block, and a Caption block, then Add block (4/4) displays, because you've already added all 4 blocks that are available in the Image with text section.

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.

Customizing 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 drop-down menu to select a different template, such as products, collections, pages, or blogs, or use the search bar in the template drop-down to search for a specific template. When you select a template, it loads into the theme editor, and any changes you make are previewed in the editor.

Note

If your screen is wider than 1600 pixels, then your customization and editing options display on the right side of your screen. If your screen is smaller than 1600 pixels, then they display on the left side.

Add a section

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

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Customize your home page, or click the Home page drop-down menu and then select the template that you want to add a section to.
4. In the sidebar, click Add section, and then take one of the following steps:
   • Select a section from the list.
   • Use the Search sections field to find a specific section, and then select it.
5. Customize your new section by taking any of the following steps:
   • Edit the settings and content of your new section.
   • Edit the settings and content of the default blocks that load with the section.
   • Click Add block to add a new block.
6. Optional: To rearrange the order of the sections on your page, hover on the section name and then click and drag the ⋮⋮ icon.
7. Click Save.

Edit a section

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Edit a section on your home page, or click the Home page drop-down menu and then select the template that contains the section that you want to edit.
4. In the sidebar, click a section name to load the content into the preview window and access the settings and options that are available for you to edit.
5. Optional: Click individual blocks to edit the blocks within a section.
6. Click Save.

Tip

You can rearrange the blocks in a section by hovering on a block's name and then using the ⋮⋮ icon to drag and drop the block, or tap and drag the block if you're using the Shopify mobile app.

Duplicate a section or block

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Duplicate a section or block on your home page, or click the Home page drop-down menu and then select the template that contains the section or block that you want to duplicate.
4. Click the section or block that you want to duplicate.
5. In the sidebar, click … > Duplicate.
6. Click Save.

Hide or delete a section or block

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Hide or delete a section or block on your home page, or click the Home page drop-down menu and then select the template that contains the section or block that you want to hide or delete.
4. Optional: To hide a section or block from your online store, hover on a section or block name, and then click the eye icon.
5. Optional: To delete a section or block from your online store, hover on a section or block name, and then click the trash can icon.
6. Click Save.

Working with blocks

Blocks are customizable modules that you use to add content to the sections in your 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 choose only from the blocks that are made available to that section by the theme designer.

Other sections allow you to select any block, but there's a limit on the total number of blocks that you can add to the section. If your section reaches the maximum number of blocks available, then the Add block option is greyed out and you can't click or tap it.

Add a block

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. You can add a block to a section on your home page, or click the Home page drop-down menu and then select the template that you want to add a block to.
4. Find the section that you want to add a block to, click Add block, and then take one of the following steps:
   • Select a block from the list.
   • Use the Search blocks field to find a specific block, and then select it.
5. Click Save.

Use 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.

Tip

This feature requires a theme that supports JSON templates. Refer to your theme documentation to find out whether your theme is compatible with dynamic theme settings. Learn more about custom data.

Caution

If you have a Shopify theme, then you can connect most metafields and metaobjects to your theme by using the theme editor. If you're using other themes, or if you want to add custom data types that your theme doesn't support, then you can edit your theme code or hire a Shopify Partner to help you. Learn more about hiring a Shopify Partner.

Not all sections support dynamic sources. Refer to your theme documentation for more information.

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 with dynamic sources in your theme.

After you complete the setup process, follow the steps below to connect dynamic sources to sections or blocks in your theme, using the Connect dynamic source button.

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Edit a section or block on your home page, or click the Home page drop-down menu and then select the template that contains the section or block that you want to edit.
4. In the sidebar, click a section or block name to load the content into the preview window and access the settings and options that are available for you to edit.
5. Click the Connect dynamic source button for the relevant content type that you want to edit, and then connect your dynamic source.
6. Click Save.

Dynamic source selector

You can use the dynamic source selector to connect the correct dynamic source directly in the theme editor. Review the following key features of the dynamic source selector:

• You can reference dynamic sources from various resources, where applicable. For instance, if you connect a setting to a block that is connected to both a product resource and a page resource, then you can use the drop-down menu in the dynamic source selector to specify whether you want to search for metafields associated with either the product or the page resource.
• The dynamic source selector has a search and filter functionality to help you find the metafield that you need.
• The dynamic source selector lets you 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.