Editing your theme

Featured links

1. Edit your theme
2. Shopify documentation on the theme editor
3. Duplicate your theme
4. Shopify documentation on theme support
5. Uploading images
6. Themes
7. Code editor
8. Edit the default wording in your theme
9. Preview of your theme
10. Theme documentation

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Shopify’s theme editor to adjust your Align theme’s content, layout, typography, and colors without editing code. Sections and settings let you tailor your store while working in a live preview.

Before you customize your theme

Prepare before making larger changes so you can experiment with confidence.

1. Duplicate your theme to create a backup. You can discard changes and start again from the copy if needed.
2. Review the available level of support
3. Review the requirements and best practices for uploading images

Tip

Duplicate Align before making major layout or content changes, especially when editing your published theme.

Access the theme editor

The theme editor shows a tree view of the content in the template you are viewing. Select a section or block to open its settings. Use ▸ to expand a section and ▾ to collapse it.

1. From your Shopify admin, go to Online Store > Themes
2. Next to the Align theme you want to edit, click Customize.

Use the menu bar

The menu bar provides theme information, navigation, editing tools, and save controls.

Use the menu bar to:

1. Return to your Shopify admin and review your theme name and status. A published theme is labeled Live; unpublished themes are labeled Draft.

2. Open the actions menu to:

   • Use Edit code to open the code editor
   • Use Edit default theme content to edit the default wording in your theme
   • Open a preview of your theme
   • Use View documentation to open your theme’s documentation
   • Review available keyboard shortcuts
   • Use Get support to get support

3. Switch between markets and templates

4. Turn Sidekick or the preview inspector on or off.

5. Change the preview with screen size controls, use undo and redo controls, and save your changes.

View documentation, support, and theme details

Open the menu in the menu bar to view theme details, including its version and developer information. The same menu provides links to theme documentation and support information.

Get help with customizations

For help using or customizing Align, start with the Company XYZ documentation and contact Company XYZ support. For Shopify-admin, billing, account, or platform questions, use Shopify support options. You can also review Shopify’s guidance on contacting your theme’s developer for support and Additional resources for theme support

Use keyboard shortcuts

Keyboard shortcuts can speed up common navigation and editing tasks in the theme editor.

Category	Action	Shortcut on Windows	Shortcut on macOS
General	Undo	CTRL • Z	⌘ • Z
	Redo	CTRL • Y	⌘ • Y
	Save	CTRL • S	⌘ • ⇧ • S
	See all shortcuts	CTRL • /	⌘ • /
Tools	Preview inspector	CTRL • SHIFT • │	⌘ • ⇧ • │
	Preview mode	⊞ • CTRL • │	⌘ • ⌃ • │
	Sidekick	CTRL • .	⌘ • .
Navigation	Sections	⊞ • CTRL • Z	⌘ • ⌃ • 1
	Theme Settings	⊞ • CTRL • Z	⌘ • ⌃ • 2
	App Embeds	⊞ • CTRL • Z	⌘ • ⌃ • 3
Sections & Blocks	Hide & show	CTRL • SHIFT • H	⌘ • ⇧ • H
	Remove	SHIFT • ⭠	⇧ • ⌫
	Select previous	SHIFT • ←	⇧ • ▲
	Select next	SHIFT • →	⇧ • ▼
	Open selected element	SHIFT • ENTER	⇧ • ▼
	Expand all sections	CTRL • SHIFT • O	⌘ • ⇧ • O
	Collapse all sections	CTRL • SHIFT • P	⌘ • ⇧ • P

Choose and preview templates

Use the page selector in the top bar to access your Align theme’s templates.

With a compatible theme, you can create a template directly from the page selector by choosing New template.

Preview a template with a specific resource

You can preview a compatible template with any matching resource in your store. For example, preview a product template with different products to check how their content displays. You must still assign the template to the resource in the Shopify admin.

You can search for templates and resources from the Search bar in the page selector, Add section, Add block, or App embeds.

1. From your Shopify admin, go to Online Store > Themes
2. Next to the Align theme you want to edit, click Customize.
3. From the template menu, select the template to preview.
4. In the sidebar menu’s Preview section, click Change.
5. From the Select menu, choose the resource to preview.

Use the preview inspector

The preview inspector lets you select sections and blocks directly in the preview, so you can find their settings quickly. You can also reorder, hide, or duplicate sections and blocks from the preview window.

When the preview inspector is active, select an outlined element to open its settings. On a mobile device, select an element and open the bottom sheet to edit its settings.

The outline indicates what you have selected:

1. A solid blue line identifies the active section. Its settings are highlighted in grey in the sidebar.
2. A dotted blue line identifies a block associated with the selected section. Select it to open the block or section settings.

Selecting an area in the preview loads its settings in the sidebar. On a mobile device, tap twice to navigate the site as a customer would.

Add sections and blocks from the preview

You can add sections and blocks directly from the preview inspector. In the Shopify app, long press a section to manage it.

Tool	Description
Add section	The Add section button appears above and below the selected section. Select it to insert a section above or below the current section.
Add block	The Add block button appears when you hover over a block. Move your cursor over the button, choose an available theme or app block, then edit the new block in the right sidebar.

Manage items from the preview

Use the preview inspector to move, hide, duplicate, or delete sections and blocks.

Check different screen sizes

Switch the preview between desktop, mobile, and fullscreen sizes to check how your changes work across layouts. Use the screen-size buttons in the menu bar to select desktop, mobile, or fullscreen.

Undo and redo changes

Use the undo and redo buttons to reverse or restore unsaved customizations. After you save, those changes can no longer be undone or redone. Buttons are greyed out when there are no available changes to undo or redo.

Work with the sidebar

The sidebar shows a tree view of the current template’s content. Use it to manage sections, blocks, and their settings.

Sidebar modes

The editor uses one or two sidebars depending on the available screen width.

1. Double sidebar mode is used on wider screens. The navigation panel appears on the left and the settings panel on the right.
2. Single sidebar mode is used in narrower browser windows to preserve more room for the preview. The settings panel opens over the navigation panel when you select a section or block.

Double sidebar mode

When your screen and fully expanded browser window are at least 1600 pixels wide, the editor displays two sidebars.

To use single sidebar mode on a large screen, narrow the browser window until the settings panel overlays or disappears from the navigation sidebar.

Single sidebar mode

On narrower browser windows, the editor displays one sidebar to make more room for the preview. Select a section or block to open its settings over the navigation panel.

Manage sections and blocks

The sidebar lists the sections and blocks in the current page. Blocks are displayed by default, while header and footer sections are collapsed by default.

Understand section groups

Every page template organizes sections into these areas:

1. Header includes the header, announcement bar, and any apps or custom Liquid.
2. Template contains the main page content, such as blog posts, collages, collection lists, or custom Liquid.
3. Footer includes the footer, email signup, and any apps or custom Liquid.

Header and footer changes apply across your store’s pages. For example, custom Liquid added to the header appears on product pages, the home page, and other pages.

Expand and collapse items

Select the button next to a section name to show or hide its contents. Select a section or block to open its settings.

Move sections and blocks

Drag a section or block using the ::: handle, then drop it in an available location. If the location does not allow that item, it returns to its original position.

Remove sections and blocks

Remove a section or block in either of these ways:

1. Hover next to the section name and select the remove button.

   

2. Select the section, then choose Remove section in its settings.

   

To remove an item from the sidebar:

1. From your Shopify admin, go to Online Store > Themes
2. Next to the Align theme you want to edit, click Customize.
3. In the sidebar, select the section or block to remove.
4. Click Remove section or Remove block.
5. Click Save. If you are editing a published theme, click Publish to save the changes and make them live in your store.

Hide sections and blocks

Select the 👁️ button to hide a section or block.

Usage notes

1. Protect your starting point. Create a theme duplicate before experimenting with significant changes.
2. Preview relevant content. Test templates with the products, collections, or other resources they will display.
3. Check responsive layouts. Review both desktop and mobile previews before saving or publishing.
4. Remember shared areas. Changes to the header or footer affect pages across your store.
5. Save intentionally. Undo and redo work only for unsaved changes.