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

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 Testament theme, you can switch between Home page, Product pages, Collection pages, Collections list, Blogs, Cart, 404 pages, and any custom pages you create.

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 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 Testament Support page where we have a lot of excellent articles and tutorials to help you set up your Testament theme. If you're unable to find an answer in our Testament Theme Support, then click Get Support and it will take you to our contact page where you can submit a support request.

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  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!