2. Testament Theme: Understanding the Theme Editor
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.
Topbar
Template Picker
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!
Sidebar
Sections Tab
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 you're viewing. Sections allow you to add, remove, re-order, and configure
Theme Settings Tab
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
Theme Actions
If you click on Theme actions you will find:
View Theme
This link will take you to a preview version of the site you are working on. On this preview version, there will not be any customization options, as this is essentially the view that the customer will have
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.
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
Add to Bag
You should now feel comfortable and familiar with all parts of the Shopify theme editor!