Episode 34 - Edit Your Shopify Theme Code for the First Time

The Podcast

---

Show Links

• Short Title Code for Collection Pages
• Shopify Cheat Sheet
• Metafields Guru App

---

Help the Podcast

---

Transcript

Hey Scott Austin here and in this episode I am going to cover how to edit the code of your theme in your Shopify store for the first time.  Now the code edit, we are going to do is actually pretty simple.  But to be able to edit any bit of theme code, I am going to lay down some foundational concepts that you will need to understand first.

Shopify allows us to fully edit any and all of the code in a theme. So all themes, regardless of where you got them from are fully editable by you or anybody else on your team.  There are many reasons why you may want to edit your theme:

1. The first common reason is you are integrating an app and the app asks you to go ahead and edit the theme to add the app’s functionality to your theme.  Some apps install themselves into your theme while others need to be manually added.
2. Another reason for editing the theme is to have it behave a little bit differently than the theme does by default or add some extra functionality that the theme does not have.

So it's very common for a Shopify expert or a Shopify partner to go in and edit a store's theme.  Every store is a bit unique and can benefit from some customization of the theme.  Now a lot of store owners don't have the time nor the technical skills to edit their store’s theme, but there's no nothing stopping a store owner from go ahead and editing their own theme.

So I am going to do this using a real example.  Even though a podcast is only an audio format, I’ll walk you through the steps needed to add some functionality to your theme.  This example is functionality that I commonly add to stores and I call it “product short titles”. In your Shopify store, every product has a title.  Let’s call that the ‘product long title’.  Let's say you have a clothing store and your product titles for a couple of women’s shirts could be:

• Women's short sleeve red cotton shirt and 
• Women's short sleeve green cotton shirt

Everything is the same about those two product titles except for the color.  And having long titles like that is desirable on your product page as it is descriptive of the product and is a benefit for SEO.

Now the opposite may be true on a collection page.  You may not want all the text contained in the product long title.  If the collection is for Women’s short sleeve shirts, then a lot of the information in the long title will be redundant for each products on the Collection page.  What we really want to do on the collection page is point out the differences between the products, not the similarities.  This is where the short title comes in.  On the collection page, the short titles could just tell the color and material like:

• Red cotton
• Lavender silk and 
• Blue nylon

We don't need to say women's short sleeve shirt every single time because this is a collection of women's short sleeve shirts. 

So this tutorial will show you how to add product short titles to your products and use those on the collection pages.

Now, the interesting thing in Shopify is that we can't just add a product short title field to the products in the Shopify Admin.  The properties associated with the product object are fixed.  You can see them on a product page in the Shopify admin and they include:

• Product title
• Product description
• Product vendor
• Product tags and
• Product type

So let me introduce Metafields, which is where we are going to store the product short title.  Metafields are extra pieces of data that developers and apps can create and access.  Metafields can be attached to different Shopify data objects including:

• Collections
• Products 
• Variants
• Customers
• Orders
• Pages
• Blogs 
• Articles and
• Shop

Metafields have 4 components:

1. Namespace
2. Key
3. Value and 
4. Description  The description is optional.

The namespace and the key work together and allow us to organize our metafields.  Think of a room of file cabinets.  The namespace is the file cabinet while the key is the drawer.  Using the two together, would allow us to quickly find the right drawer in a room of file cabinets.

So if an app is creating some metafields, It can create all of those metafields under a common namespace to keep things more organized.

For our product short title example, the short title will be stored in a metafield attached to the product.  We’ll use the namespace of product_meta and the key of short_title.  What we use is pretty flexible, though we do have to be consistent when creating the metafields and accessing them in the theme code.  Spelling, special characters and capitalization matter.

Hopefully, that helps you wrap your head a little bit around the concept of metafields. They are an easy way for us to create some structure behind additional data that we want to create and use in our store.

There is no way to edit meta fields inside of the Shopify admin but there are plenty of apps that allow us to do it.  the app that I like is a free one called Metafield Guru.  It's got a really nice UI. Actually, it is a really nice app especially considering it's totally free.

With the app you’ll be able to add, delete and edit any metafields in your store.  As you use it, you may discover existing metafields in your store that are used by different apps.

So, using the Metafields Guro app, go ahead and create some short title metafields for some products.  

Now let's switch gears a bit and talk about editing code.  Your store already has a theme that it is using.  In the Shopify admin, you are going to find the theme under Sales Channels > Online Store > Themes.  There may be one theme in there or more than one theme.  A Shopify store can have up to 20 themes.  But only one of the themes is Live.  The Live theme is the one currently being used to render the site to customers.  The rest of the themes are offline.

Now, its a good best practice to not edit the Live theme.  That way, if you make a mistake, customers are not impacted.  So go ahead and create an Offline theme from the Live theme.  You do that by clicking on the Actions button for the Live theme and selecting Duplicate from the drop down menu.  That will create an offline theme with the same name as Live theme but preface it with “copy of”.

Most stores use a naming convention for their themes.  I like to use the theme developer’s theme name and the date I made this version of the theme.  For example, in the store I’m working in right now, I’m using the Flex theme by Out of the Sandbox.  The Live theme is named Flex - March.  I’ve renamed the duplicate theme I made Flex - August.  

I’ll be making changes in the offline theme.  And Shopify has some nice functionality that will allow us to preview that offline theme while we're working on it so we can do testing.  To preview an offline theme, just click the Actions link for the theme and select Preview.  It will open up a new browser tab of the customer-facing side of your site using the offline theme.  Now don't worry about your customers here.  Only you will be seeing the preview of the Offline theme.  Your customers will still be viewing the Live theme.

So the way I usually work is to be editing the code in the Shopify admin on one screen; I work on a dual-monitor setup.  And have the preview open on the other screen.  Then as I make changes to the code, I can refresh the preview screen and see the impact the code changes have on the customer experience.

So now in our Shopify admin, we want to edit our theme code.  Go to the Actions link next to the Offline theme and select Edit Code.  This will open up the Shopify code editor for themes.  What you see on the screen is the directory structure of the theme.  There are folders and files.  The top-level folders are:

• Layout
• templates
• sections
• snippets
• assets
• config and
• locales.

Here's what is in each of the folders.

• layout - this is where the theme.liquid file is and if you have a Shopify plus store there's a few other files that show up here too.  Theme.liquid is the main file that is used in rendering every page in your store.  It loads up many of the CSS and JavaScript files used by the theme and apps.
• Templates.  These files are the templates used to render different types of pages in your store, like collection, product, blog, article and more.  Templates in today's Shopify themes are actually pretty small files because they reference files in the next two folders in your theme structure and those are sections and snippets. So sections and snippets are where a lot of the Liquid code work is actually done in your store.
• Sections.  These files are the building blocks for templates.  Sections have code that expose settings in them to you in the Customize Theme experience.  So for example, your theme may allow to specify a banner image for a page.  That banner specification is happening in a Section.
• Snippets.  These files are building blocks like sections.  Except they don't expose settings in the Customize Theme experience.
• Assets.  This folder contains the CSS, Javascript and graphics used in the theme.
• Config.  These files define and record all of the theme settings exposed in the Customize Theme experience. 
• Locales.  This is where the different language versions of the theme are stored.

Back to our project.  Our goal is to use the Product Short Title metafield on collection pages instead of the product title.  So the next step is find which file in the theme has the code that we want to edit.  And this is the most complex part of this whole exercise.  It sometimes take some detective work to figure out where the code lies.  And that's because a template file, in this case the collection template, can call up or reference multiple sections and snippets.  Each of the sections and snippets have particular jobs they are doing like the banner, or the sort selector, or the sidebar, or the product grid.  And sections can also call snippets.  So the code we want to edit may be a couple files deep from the template. 

To start our investigation, we need to know what we are looking for.  In this case, I know that in Liquid code, the product title is referenced as {{ product.title }}. 

I'm going to take a tangent here for a moment.  You may be wondering what is a {.  Well in any coding language, there's this thing called syntax.  Syntax is the set of rules that define how the code needs to be formed.  Its basically the grammar and punctuation rules for the coding language.  In liquid, the double { brackets  are used to get data from the Shopify database.  So if the code says {{ product.title }}, the Shopify server will take the text from the title field for that product and put it in the HTML file sent to the browser.  Also in Liquid, you'll see {% %} a lot.   These denote logic.  For example, an IF statement would be inside {% %}.  Don't worry too much about which one to use yet.  It will become clearer as you work in Liquid code more.

Now, back to where we were.  We want to find {{ product.title }} in the theme files.  But if you didn't already know that, here's how you could have figured it out.  The tool I use is called the Shopify Cheat Sheet and I'll include a link to it in the show notes.  The cheat sheet lists all of Shopify's data objects and all the elements of those objects.  In the cheat sheet, as a look at the Product data object, it tells me that product.title returns the title of the product.  Now that one is pretty intuitive, but browsing the Cheat Sheet can reveal some interest data elements.

So our next goal is to find the reference to product.title in the collection template or its referenced sections and snippets.  A quick search, which you can access by Control-F in Windows, for product.title in the collection template will probably come up empty.  So the next step is to open all of the sections and snippets referenced in the template.  Sections are called by sections wrapped in {%.  Snippets are called by either Include or Render wrapped in {%.

If you find more than one reference to product.title in the sections and snippets, you'll need to apply some common sense to determine which ones to edit.  In the flex theme that I'm looking at, there are three product.titles and I'm going to need to edit two of them. 

The one I won't edit is used to create the alt text for the product image.  The two I will edit are used to show the product title in two different situations.  One is when the product title is displayed under the image on the collection page.  And the other is used when the title is only shown when the customer hovers over the image.

Now that I've found the code, I can replace it with the updated code.  Let's talk about the logic of that updated code.  The code says:

{% if product.metafields.product_meta.short_title %}

  {{ product.metafields.product_meta.short_title }}

{% else %}

  {{ product.title }}

{% endif %}

So what this is doing for each product being listed on the product page is that's checking for the existence of the short title metafield.  If a product has a short title metafield that is used.  And for products that don't have a short title, the regular product title gets used.  Now if the logic and the syntax of this code snippet is still confusing, don't worry, it will become more clear the more you work with Liquid.

Now the next step is to test that it works.  From the beginning of the project, you should have some products with Short Title metafields.  If you don't, go ahead and add them now using the Metafields Guru app.  And make sure that your Short Titles are different from the product titles.  Then go to the theme preview and see that things are working as expected.  I believe in doing lots of testing.  So test on different products and in different collections.  And also make sure that the correct product long title is displaying when the product has no short title.  

Once you have tested and are satisfied with the results, you can push the theme with the edits Live.  You do this by selecting Publish from the Actions drop-down.

So that's it for your first code edit.  In summary, here are the steps:

1. Create metafields for the product short title
2. Make a duplicate of the live theme where we can edit the code without affecting customers
3. Make our code changes
4. Thoroughly test our changes
5. Publish the updated theme so that it is live

So hopefully this tutorial has given you enough background information that you can have confidence if you haven't edited your theme before to go ahead and try this change.  It's a fun one because it is very functional and really cleans up collection pages.

Now, working on theme code is not like a following a recipe.  No theme editing tutorial can cover with complete clarity what the steps to take are.  That's because there are many different themes and they do things differently.  You'll have to add your common sense to the process to complete it.  Remember, the reason we edit in an offline theme is that it allows us to do something completely wrong and yet have no impact on the customer.  Many times, I've had to scrape all of the edits I had been working and start over from the beginning.  It's one of the ways to learn.

So that's all I've got for this episode.  If I've inspired you to crack open your theme code and make your first theme edits, I'd love to hear how it went for you.

Thanks for listening.