Using the theme editor

  • Last updated

Add sections, configure settings, and preview your changes using the Shopify theme editor. This is the control center of the theme where page templates can be customized for the home page, product page, and more.

Access the theme editor to get familiar with the top bar, Template, Theme settings, Theme actions, and Preview features.

home_page_in_atlantic_with_logo_list_section_being_moved.png

Access the theme editor

Go to your Online Store, then Themes.

Click Customize beside the theme to open the theme editor.

click_customize_to_open_the_theme_editor.png

Top bar

Undo, redo

The two buttons with circular arrows represent undo (left) and redo (right). Use these to correct any adjustments made in the theme editor.

Template selector

To open a template, use the page selector dropdown.

open_the_collection_page_in_theme_editor_to_view_promo_block.png

Device selector

Above the right-side preview, you can change the device view. Use this to get a sense of how your store appears in mobile, desktop with settings sidebar, and full-window desktop.

use_the_device_selector_to_view_storefront.png

Publish button

Publish your theme without leaving the theme editor by selecting Publish.

Save button

The Save button applies your customizations to the theme. Save your theme to view the latest changes in the preview or live storefront.

Template

Formerly known as the Sections tab, the Template portion of the sidebar your control center for adding sections. Sections are stackable, dynamic features to customize the storefront. These are the building blocks of your store and provide a wide variety of features, layouts, and more.

cart_page_template_being_accessed.png

The home page sections in themes are currently limited to the home page. Stay tuned, though. Sections for other pages will soon be available following platform and theme enhancement currently in development.

Add, remove, and reorder sections from Templates. Each section has customizable features and settings accessed by opening the section in the left sidebar.

Theme settings

Use the Theme settings to make global changes to various aspects of your theme, such as colors, typography, and layout.

Theme settings vary depending on the theme

Theme actions

View or preview theme

View theme will open a new tab or window to see how the saved content will display from the customer's point of view. This will be called Preview theme if the theme is still in the draft stage.

If your theme is hidden by a password page or unpublished, use the Share preview feature to generate a unique link to share with staff, clients, etc.

  1. Select Theme actions
  2. Preview theme
  3. In the Preview tab or window, select Share preview from the bottom bar
  4. Copy the provided code to share

Edit code

For direct theme file modifications, select Edit code from the Theme actions menu.

Theme file modifications are not advised. Changes to the theme files can result in errors on the storefront, so consider working with vetted 3rd-party developers if modifications are important for your store.

Edit languages

Access the language editor by selecting Edit languages Use this editor to change the language of your theme and checkout, as well as customize the terminology that is used throughout your store.

How do I change the wording in my theme?

Using the theme language editor

Can I translate my theme to another language?

Cross border: Choosing an app for language selection

Preview

The right-side preview provides a window into the storefront's appearance. Use the top bar features to modify the window and device previews.

Interact directly with the right-side preview to test links and access pages more directly.

elements_of_the_preview_are_clickable.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Related articles