References
Introduction
You can edit your theme to customize your online store's content, layout, typography, and colors. Each theme provides sections and settings that allow you to change the look and feel of your store without editing any code.
Before you customize your theme
To prepare for customizing your theme, complete the following recommended tasks:
- Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.
- Make sure that you understand what level of support is available.
- Learn about the requirements and best practices for uploading images.
Theme editor
The theme editor displays a tree view of all the content for the template that you're currently viewing in the sidebar. Expand a section node using the expand icon ▸ to view its blocks, or collapse it using the collapse icon ▾ to hide the blocks. You can click any section or block to view its settings.
Access the theme editor
- From your Shopify admin, go to Online Store > Themes.
- Next to the theme that you want to edit, click Customize.
- Click Sections.
Preview inspector
The preview inspector is a new feature of the theme editor. It allows you to navigate to sections and blocks directly from the preview window and find the corresponding settings faster and more intuitively. With the preview inspector, you can reorder, hide, or delete sections and blocks right from your preview window.
The preview inspector is available for all free Shopify themes, and is activated by default. You can toggle the preview inspector on or off during your editing session.
When the preview inspector is activated, you can click any outlined element to open the corresponding setting. On a mobile device, when the preview inspector is activated, you can click any element to select the corresponding setting. You can open the bottom sheet to make edits through this selected setting.
The preview inspector displays two different borders around the sections and blocks clicked in the preview window:
- Solid blue line: The active section. The corresponding setting in the sidebar is highlighted in grey.
- Dotted blue line: An associated block for the section. Clicking the item in the preview window opens the settings for the block or section.
Clicking any part of your website in the preview window loads the corresponding settings in your sidebar. On a mobile device, tapping twice will navigate the site as a customer would.
Add sections and blocks in the preview inspector
While using the preview inspector, you can add sections and blocks to your theme directly from the preview window. On mobile, you can add, duplicate, hide, move, and delete sections by using the edit mode in the bottom sheet.
| Tool | Description | | -- | -- | | Add section | The Add section button displays at the top and bottom of the selected section. Click the Add section to insert a new section either above or below the selected section. | | Add block | The Add block button displays when you hover over an existing block. To add a block, click the + icon. A pop up menu displays with the theme and app blocks that can be added to the selected section. Click the block that you want to add. The settings window for the new block loads in the right sidebar. |
Preview inspector tools
You can move, hide, duplicate, or delete sections and blocks from your theme editor with the preview inspector.
| Tool | Description | | -- | -- | | Move to next/previous position | You can move a section or block to the next position or the previous position using the arrow icons in the preview inspector. If the selected section is at the top of your page, then move to previous position button will be greyed out. Likewise, if your section is at the bottom of your page, then you can't use the move to next position button. | | Duplicate section or block | Click the copy icon to duplicate a section or block and its contents. | | Hide section or block | Click the eye icon to hide a section or block. When a section or block is hidden, you won't be able to unhide it from the preview inspector. You can either click the Undo button on your home bar, or close the settings panel to return to the theme editor home, where you will view any hidden sections or blocks listed in your sidebar with the eye icon struck out. Click this icon to unhide the section or block. | | Delete section or block | Click the trash can icon to delete the selected section or block in the preview inspector. |
Sidebar modes
The theme editor offers two modes to make use of all of the space on your screen.
Double sidebar mode is for wider browser windows and larger screens, and single sidebar mode is for narrower browser windows and smaller screens. The sidebar mode determines where the setting panel displays in the editor.
Double sidebar mode
If you have a screen larger than 1600 pixels wide and your browser window is fully expanded, or your browser window is expanded to at least 1600 pixels wide, then you'll have two sidebars. The left-hand sidebar contains the navigation panel, and the right-hand sidebar contains the setting panel.
Tip
To view the theme editor in single sidebar mode on a large screen, make your browser window narrower until the setting panel moves over top of the navigation sidebar or disappears.
Single sidebar mode
Narrower browsers have only one sidebar to conserve space for the theme preview. When you click a section or block to edit it, the setting panel opens over top of your navigation panel in the sidebar.
Section groups
Sections are grouped into the following areas in every page template:
- Header: this includes your header, announcement bar, and any apps or custom Liquid.
- Template: this includes sections that make up the main body of your page. For example, the template sections can include blog posts, collage, collection lists, or custom Liquid.
- Footer: this includes your footer, email signup, and any apps or custom Liquid.
Your header and footer is shared across all of your online store's pages. For example, if you add a custom Liquid block to the header, then that custom Liquid displays on all your product pages, home page, and any other pages. You can reorder the sections as needed.
Sections and blocks
In the list of sections and blocks, all of the blocks for the sections on a page are displayed by default.
Sections that make up the header or footer are collapsed by default, but you can view them if you click the expand icon ▸ next to the section name.
Moving sections and blocks
You can move a section or a block from one area of the page to another area using the ⋮⋮ icon to click and drag the section or block and then drop it to another available location.
If you attempt to move a section or block where it isn't allowed, then the section or block will drop back into the original location.
Removing sections
You can delete a section or block from a template from the setting screen for each item. The Remove section button displays at the bottom of the section settings.
Steps:
- In the theme editor sidebar, click the section or block that you want to remove.
- Click Remove section or Remove block.
- Click Save. If you're editing a published theme, then click Publish to save your changes and make them live in your store.
Hiding blocks
You can hide any section or block using the eye icon.
Templates
You can access all of your theme's templates from the page selector in the top bar of the theme editor.
If you're using an Online Store 2.0 theme, then you can also create a new template directly from the page selector by clicking the New template option.
Previewing templates with specific resources
When you're viewing a template, you can preview how it looks with any compatible resource in your store. For example, if you're viewing a product template, then you can test it with any product in your store.
Note
You still need to assign the template to the resource in the Shopify Admin.
Tip
You can also search for templates and resources using the Search bar in the page selector, in the Add section or Add block tool, or in App embeds.
Steps:
- From the theme editor page selector, select the template that you want to preview.
- From the navigation panel, in the Preview section, click Change.
- From the Select menu, select the resource you want to preview.
Undoing and redoing actions
The Undo and Redo buttons are located at the top right of the theme editor.
Inline editing of custom data
When you're working with custom data to build metaobject pages, you can edit your metafields and metaobjects directly inline without having to navigate to the admin to make changes. This works for image, video, color, product, page, collection, and text metafields.
Steps:
- Select a compatible setting in your theme that is referenced to your metaobject.
- Select and edit the metafield value in your metaobject entry from the settings panel.
- Save your work and your landing page will automatically refresh with the updated information.
Note
Inline editing only allows you to edit the currently previewed metaobject when you're on a metaobject page template.
Viewing documentation, getting support, and checking your theme version
Links to your theme's documentation and support information can be found in the More ⋯ menu in the menu bar. In this menu, you can also check the theme version and creator information.
Tip
If you use a free theme from Shopify, then you can see detailed descriptions of its sections and settings by checking out Free themes from Shopify and clicking on the name of your theme.
To learn about sections and settings for paid themes, refer to the theme's documentation.
Get help with customizations
If you need help with making changes to your theme, then you can contact your theme's developer for support.
To see what other resources are available to help you with theme customizations, see Additional resources for theme support.