Your safety is important to us. If you notice any suspicious emails that appear to come from Shopify, please forward them to safety@shopify.com. Visit the Help Center page on phishing for more information.

Theme sections

Tip

If you want to see more educational videos and tutorials like this one, visit our video library.

For themes with sections, Shopify's theme editor offers an easy way to customize your store's layout. You can add, reorder, and remove content on your store's homepage using sections. Sections let you customize your store's design and content in a quick and visual way.

The theme editor has been updated to support themes with sections. If you are using a theme that does not have sections, then you can still have access to the new theme editor.

All Shopify themes currently available in the Theme Store support sections. Themes created before October 2016 do not support sections.

Theme sections

Sections are customizable parts of your theme. They let you add, reorder, and remove chunks of content on your store's home page. Each theme has a unique set of sections to choose from. Sections let you pick the types and order of content you want to feature on your home page. Examples of sections include featured products, slideshows, collection listings, or videos.

Within a section, you can add different types of content. These content types make up the content inside each section of your home page. Each section in a theme has its own content types that you can add. Some examples of content types within sections are products, text, or images.

When you add content like images and videos to your store, you can use that content in your theme sections.

Fixed sections

Most themes that use sections will have fixed sections that can't be moved, usually the theme's header and footer. Although you can't move fixed sections around, you can still customize their content the way you want.

Theme editor

The theme editor lets you add and reorder sections in your theme. The theme editor menu appears on the left side of your browser window:

Sectioned theme editor

Note

If you are using an older theme that does not support sections, then the theme editor will have limited functionality.

Sections

The theme editor is divided into two tabs: Sections and General settings.

The Sections tab shows the page content that is available with your theme. Each part of a page is called a section. You can use the Sections tab to customize sections, add more sections and move sections around on the page:

Sectioned themes sections tab

General settings

You can make global changes to your store using the General settings tab. General settings include typography (fonts), text and background color, and links to your social media accounts:

Sectioned theme settings tab

You can also make some changes to the general settings from the Sections tab. For example, some themes let you add social media icons to the footer section of your store. When you customize the Footer section on the Sections tab, the social media icons will be available for you to customize:

Editing general settings for footer content

Using theme styles

Each theme has at least one theme style, which is a collection of the colors and styles used your store. To change your theme style, click the Change theme style button in the General settings tab, then click the theme style you want to use:

Reset theme style

You can use the Change theme style button to reset your theme settings to a default state.

Add sections to your store

You can add sections to your home page using the theme editor menu:

Note

These instructions only apply to themes that support sections.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit and click the Customize theme button for the theme.

  3. In the sidebar menu, click Add section:

    The theme editor's 'Add section' button
  4. Click the type of section that you want to add, then click Add. The options are theme-specific, so different themes will have different section options.

  5. Change the section's content by adding and editing the content blocks using the sidebar menu.

  6. When you like the way the section looks, click Save or Publish to save your changes to the theme.

Tip

When you add an image file to a section, the file is added to your store's files in the files section of your admin. You can then reuse this image in other sections or pages of your store.

Change the layout of a page by moving sections

You can change the order of the sections on your theme home page. In the theme editor's sidebar menu, click ⁞⁞ on the section you want to move and drag the section to where you want to move it:

Moving a section in the theme editor

The preview of your theme will update to show the section in its new location.

Remove sections from your store

You can remove sections and content from your home page.

Remove a section

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit and click the Customize theme button for the theme.

  3. In the sidebar menu, click the section that you want to remove.

  4. Click Delete section at the bottom of the sidebar menu.

Remove content from a section

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit and click the Customize theme button for the theme.

  3. Click the section containing the content that you want to remove.

  4. In the Content section, click the content you want to remove from the section.

  5. Click Delete [content], where [content] is the content type (collection, image, or logo, for example).

Tip

Deleting content in this way just removes the home page content — it doesn't delete things from your store. If you delete a product or collection block from a section, that product or collection will still exist in your Shopify store. If you delete an image in a section, you can still add that image to other content blocks.

Undoing and redoing changes

The Undo button reverses your most recent change, and the Redo button adds back a change that you undid. Clicking the Undo button more than once will continue to undo your work, one change at a time. You'll find the undo and redo buttons at the bottom of the theme editor:

Theme undo redo

Use the undo button to reverse the following changes:

  • adding, reordering, and deleting sections
  • applying colors, fonts, etc, on the Settings tab
  • resetting a theme style.

Tip

You can undo changes even after clicking Save.

Using themes that do not support sections

If you are using a theme that does not support sections, you do not need to make any changes to your theme. Your store will look and function the same way it did before the theme editor was updated to support sections.

When you customize your theme, the new theme editor will display. You can update and publish your theme using the new theme editor, although you will not be able to reorder sections in your theme. If you want to use a theme with sections, visit the Theme Store and install any theme.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free