Editing your theme

Introduction

Editing your theme empowers you to fully personalize your store’s content, layout, typography, and colors — all without touching any code. Our advanced, user-friendly themes make it simple to achieve a memorable look for your site using well-organized sections and straightforward settings.

Preparing to customize your theme

Starting out with theme customization is easy, especially if you set yourself up for success:

1. Duplicate your theme to create a backup.

   • This allows you to revert your shop to its previous state if needed.

2. Familiarize yourself with your theme’s support features, so you know where to go for help.

3. Review image requirements and best practices to ensure your visuals always look their best.

💡 Tip: Always duplicate your theme before making significant changes. This way, you can experiment confidently and safely.

Theme editor overview

The theme editor offers a visual, intuitive way to update your store. In the sidebar, you'll find your template’s contents displayed in a tree view, organized for quick navigation. You can easily expand or collapse any section to access specific blocks and settings.

Access the theme editor

1. In your admin, go to Online Store > Themes.

2. Click Customize next to the theme you want to change.

Menu bar features

The menu bar at the top of the editor offers quick access to essential theme information and robust controls.

1. Quickly return to your admin dashboard.

2. View your theme’s name and its publication status:

   1. Live — the theme is published.

   2. Draft — the theme is not currently published.

3. Open the menu for additional options:

   1. Edit the theme’s underlying code.

   2. Update or edit the default wording in your theme.

   3. Preview your theme as your customers will see it.

   4. Access theme documentation for help and tips.

   5. View a list of all theme editor keyboard shortcuts.

   6. Reach out to theme support.

4. Switch between templates and market layouts with the template and market menus.

5. Use powerful menu bar controls:

   1. Toggle Sidekick on or off.

   2. Launch the preview inspector to go directly to any section or block.

   3. Switch between different screen size views to preview your site.

   4. Use undo or redo to step back or forward through your customizations.

   5. Save all changes when you're ready.

Theme details, documentation, and support

You can always view your theme’s version, developer contact, and access helpful documentation and support directly in the theme editor.

If you need extra help, reach out to our dedicated support team or check our comprehensive documentation.

📝 Note: Our themes include full support and are paired with frequently updated documentation, ensuring you always have guidance and resources available.

Keyboard shortcuts in the theme editor

Keyboard shortcuts enable you to work more efficiently and navigate quickly in the theme editor.

Managing and previewing templates

The template page selector at the top of the editor lets you manage all your theme’s templates. If your theme is up to date with the latest features, you can create new templates directly from here. Previewing different templates with specific resources shows you exactly what your customers will experience.

Steps to preview templates with specific resources

1. Go to Online Store > Themes.

2. Click Customize for your chosen theme.

3. From the template menu, select the template you want to preview.

4. In the sidebar, open the Preview section and click Change.

5. Pick a resource to use for the preview.

Preview inspector

The preview inspector helps you quickly locate and edit sections and blocks by simply clicking them in your live preview. This lets you move, hide, or duplicate elements instantly, so arranging your store layout is faster and more efficient.

The preview inspector is always available in our advanced themes and usually enabled by default. Use the icon in the menu bar to switch it on or off as needed. When the inspector is active, clicking on any outlined area will open that element’s settings.

• A solid blue line means you are editing an active section.

• A dotted blue line points to the selected block.

⚠️ Important: Selecting an element in your preview will instantly open its settings. On mobile, tap twice to navigate as your customers do.

Adding sections and blocks with the preview inspector

Easily add content in just the right spot by using the preview inspector.

1. Add section buttons appear above and below each section, making it simple to insert content exactly where you want it.

2. Hover on a block to reveal the Add block button and place new content precisely.

With these controls, you can rearrange, duplicate, or delete sections and blocks for a customized store layout.

Viewing different screen sizes

Preview your store as your customers see it on desktop, mobile, or full screen. Toggle these modes with menu bar icons to make sure every customization looks perfect on every device.

Undoing and redoing changes

The undo and redo buttons make it easy to reverse or reapply unsaved changes while you work. Once you save your updates, previous actions can't be undone or redone. If there’s nothing to undo or redo, the buttons appear greyed out.

Sidebar organization and modes

The sidebar organizes every section, block, and setting for the template you’re working on.

Double sidebar mode

On wide screens (more than 1600 pixels), the editor displays both a navigation sidebar to the left and a settings panel to the right.

Single sidebar mode

For narrower screens, the sidebar collapses to a single column, showing section or block settings right above navigation for a seamless experience.

Working with sections and blocks

All blocks for your page show in the sidebar by default. Header and footer groupings are collapsed for a clean view but can be expanded at any time.

Section groupings

Each template offers three primary organizational areas:

1. Header — Contains your announcement bar, header, installed apps, and custom code.

2. Template area — Displays the main body content, including blog posts, images, collection lists, and custom code.

3. Footer — Contains your footer section, newsletter signup, and any additional apps or code.

Header and footer sections are global, so any updates show up on every page. For example, adding a custom Liquid block to your header will display it everywhere by default.

Expanding and collapsing sections

Expand or collapse sections with the arrow icon beside each section’s name. This tidy view makes it quick to find and edit content.

Moving sections and blocks

Change the position of any section or block by dragging the ::: button. Items will snap back if dropped somewhere that's not allowed.

Removing sections and blocks

You can remove content in two ways:

1. Hover to the left of any section or block name and click the remove button.

   

2. Select the section or block and click Remove section or Remove block in its settings pane.

   

Steps to remove content

1. Open Online Store > Themes.

2. Click Customize next to your theme.

3. Select the section or block to remove in the sidebar.

4. Click Remove section or Remove block.

5. Click Save to apply your changes. For published themes, changes take effect right away.

Hiding sections and blocks

You may want to hide a section or block temporarily instead of deleting it. Just click the 👁️ button to hide any block or section without losing its content or settings.

📝 Note: Hiding sections and blocks is ideal for running seasonal promotions or making temporary changes. You can easily bring hidden content back as needed.

By using all the advanced features and user-friendly tools in our themes, customizing your store is efficient, safe, and enjoyable. You’ll be ready to build a professional online presence that truly stands out and inspires confidence in your customers.