In this article, we will go through a quick introduction to the Shopify theme editor.
Adding products, collections, navigation items, blog posts, etc. is done in the Shopify admin. The Shopify theme editor, however, is a tool for changing and previewing theme settings (the look and feel of your site) in real-time.
Accessing the Theme Editor
You can access the theme editor a few different ways:
In the Shopify Admin
From your Shopify admin dashboard click on Online Store > Themes, find your theme and click Customize.
When Viewing your Site
If you're logged in as an admin, and you're viewing your site, you will see a black bar with a Shopify logo at the top of your website. Click on > Customize Theme.
The template picker can be found in the Topbar of the theme editor. The template picker allows you to view and switch between different theme templates. In the Icon theme you can switch between Home page, Product pages, Collection pages, Collections list, Blogs, Cart, and 404 page.
Device Size Picker
The Device Size Picker can be found in the Topbar of the theme editor. You will see three device icons, the button on the left will show your site as it looks on mobile screens, the button in the middle will show your site as it looks on medium desktop screens, and the button on the right will show your site as it appears on larger full-screen desktops. You can switch between these three buttons to check different views.
Theme Status and Save
The Theme Status and Save Button can be found in the Topbar of the theme editor. If your theme is currently the live, published theme it will show a green dot with "Live", if you are working on an unpublished theme it will not show a status. The save button is for saving of course if the button is bright blue then you have changes that still need to be saved!
The sections tab is where you will find the settings and configurations for the template you have selected in the template picker. You will also find the settings for the Header, Footer, and Mobile Navigation. The available settings in the sections tab will change depending on the template your viewing. Sections allow you to add, remove, re-order, and configure theme components.
Theme Settings Tab
The theme settings tab is where you will find global settings that affect the website across all pages, like Colors, Fonts, and Social Media Icons. The available settings in the theme settings tab will stay the same no matter what template you have selected in the template picker.
In the theme settings tab you will also find a few more important things:
Change Theme Style
Our themes come with 3-4 different theme styles. You will pick one theme style that is your favorite, as a quick starting point for setting up your theme (we'll get more into this in the next article).
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.
If you click on Theme actions you will find:
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.
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!