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.
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.
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
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.
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.
3. Change theme style
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.
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
Add to Cartto
Add to Bag, you will do this in Shopify Languages (we'll get into this more a bit later).