Understanding the theme editor

In this article, we will go through a quick introduction to the Shopify theme editor.
Here you can set up the content, image settings, and color scheme for your Shopify theme.

Changes made here will control the visual display and user experience of your Shopify content which include: Products, Collections, Pages and Blog posts.
The theme would not add, delete or modify this content in any way.

Top bar controls

1. Template Picker

The template picker allows a quick way to view and switch between the different templates which make up your theme.

icon-theme-editor-template-picker.png

2. Device preview

The device picker allows you to switch between different views that will simulate a Mobile and Desktop view of your store.
Although somewhat accurate we do always recommend testing your store on a mobile device prior to publishing.

icon-theme-editor-device-size.png

3. Theme Status and Save

If your theme is currently the live, published theme it will show a green dot with "Live" alerting you that you are working on a live theme and changes will be immediately visible to customers. Save your work often to prevent loss as unsaved changes can not be recovered

icon-theme-editor-theme-status.png

Sidebar

1. Sections Tab

The sections tab is where you will find the settings and configurations for the template you have selected in the template picker or that exists on the page you are currently viewing. Sections and their contained blocks represent specific content that appears on the page which is available for editing.

icon-theme-editor-sections.png

2. Theme Settings Tab

The theme settings tab contains global settings that affect the website across all pages, such as: Colors, Typography, and settings that are commonly shared across multiple different templates. The available settings in this tab will stay the same no matter which template you have selected in the template picker.

icon-theme-editor-theme-settings.png 3. Change theme style

icon-theme-editor-theme-styles.png
Our themes come with 3-4 different theme styles. Each style contains pre-configured color, content layout and typography settings that serve as a quick start for those looking to follow more closely with our demo styles. 

4. Theme Version, Read Documentation and Get Support

Below the change theme style button, you will see the name of the theme as well as the theme version. If you contact our support it is important to check your theme version here and let us know. If you click the Read Documentation link it will take you the Icon Support page where we have a lot of excellent articles and tutorials to help you set up your  Icon theme. If you're unable to find an answer in our Icon Theme Support, then click Get Support and it will take you to our contact page where you can submit a support request.

icon-theme-editor-doc-support.png

Theme Actions

icon-theme-editor-theme-actions.png
If you click on Theme actions you will find:

1. Edit Code

For those of you experienced with Liquid (Shopify's templating language), HTML, and CSS then you can access the theme code here. If not contact us, we would be happy to get you connected with a professional Shopify Developer.

2. Edit Languages

This link will take you to the Language page in your Shopify admin. Here you will be able to change your default site language and the wording used throughout your site. For example, perhaps you want to change Add to Cart to Add to Bag, you will do this in Shopify Languages (we'll get into this more a bit later).
You should now feel comfortable and familiar with all parts of the Shopify theme editor!