How to Edit Theme Files in Shopify (Visual Guide)
Even after spending a lot of time finding that perfect theme for your online store, there’s a good chance that theme won’t match up to the creative vision you have. While Shopify is functionally sound off the shelf, and it offers some of the best eCommerce themes available, you’re likely to find a number of visual tweaks that you still want to make.
If you’re completely new to Shopify, understanding how to do that might feel overwhelming at first.
Don’t let that slow you down.
Ease of use is one of the reasons Shopify has risen to become one of the preferred eCommerce platforms, even among enterprise brands. In fact, analysis of platforms used by the top 1 million eCommerce retailers shows that Shopify ranks second in the world.
Like so many others have discovered, editing the theme of your online store is incredibly simple.
In this article, I’ll walk you through how to customize your store in Shopify, edit theme files, and give your store the personalization it needs to stand out online.
Before You Get Started
Any time you make changes to the theme design and files in your Shopify store, those changes will become live as soon as you click “save”.
Since any minor error when customizing your theme could break the visual design of your site, you should make a backup of your current theme files beforehand.
If you’re not familiar with HTML or Liquid, Shopify’s unique coding language, you might find the learning curve steeper for making significant visual edits in the theme files. In cases where you want to make complex customization, or time is a critical factor for you, you should consider working with a trusted Shopify partner to design your store.
How to Edit and Customize Your Shopify Theme
There are two approaches to customizing your Shopify theme.
The simplest approach is to use the visual customization tool built into the Shopify platform. The visual editor requires no knowledge of code and allows you to edit the existing elements coded into the theme you have installed.
When using the visual editor, the changes you make are somewhat limited.
The theme files are coded to establish not only the visual layout of the site, but also how certain elements are handled and displayed when you create custom landing pages in Shopify. The visual editor will let you add sections within your layout, add and edit how content is displayed, and make limited changes to the layout of individual sections.
To find the theme customization, log into your Shopify dashboard. Click on “Online Store” and then click on “Themes”.
Once inside the Themes window, click the “Customize” button.
From the customization window, you’ll be able to edit the sections of each page in your Shopify store by selecting them from the menu on the left.
The sections you see will change based on the page you’re viewing. Some pages will be limited on what sections you can add. Again, this is determined by how the theme files have been coded.
To change the page you want to edit in your theme, click the down arrow next to the current page at the top of the window. Select the next page you want to edit by clicking on it. Be sure to save any changes to your current page before moving on to the next.
Each section you edit will have customization options based on how those sections have been coded in Liquid.
For example, when choosing the “image with text overlay section” you’ll have options to change alignment, layout, text size, the image and content.
When editing a featured collection section, the customization options change to how products are displayed with some other simple display options.
Depending on the theme you have in your store, you may be able to add sections to the individual page templates within your theme. When you click on “Add section”, you’ll be given a list of the available sections to choose from.
When you select a section, you’ll see a preview of it in the main window, with the option to “Add” the section to current page.
After clicking to add the new section, you can further customize it from the menu like the other sections as shown above.
Additionally, you can click and drag the sections to reorder how they appear on your page to further customize the layout.
You can also edit the header and footer to control the alignment and display of your logo and store menu.
Customizing the settings of your theme
In the same menu, you’ll find a tab for Theme Settings. Within these settings you can make additional customization to elements of your store such as:
- Theme colors
- Typography (font type and size)
- Social sharing options and linked social accounts
- The favicon for your store
- And various display elements of your checkout page
If you want more control over the customization of your Shopify store outside of the visual editor, you’ll need to edit the theme files directly.
Editing Code Directly in Shopify Theme Files
This approach to customizing your Shopify store is a bit more challenging, though not much especially if you have experience working with HTML and CSS.
And while Shopify has it’s own language that coincides with the HTML of your store, you can easily pick up the basics well enough to start making whatever theme you install more personalized to your brand.
There are two ways to edit the theme files in Shopify.
First, you can switch to editing the code from within the customization window if you’re already making visual changes to your site.
At the bottom of the editor, click on “Theme actions” and choose “Edit code”.
The other method is from the main Themes window. Instead of clicking “Customize”, you can click on “Actions” and choose “Edit code”.
Either method will launch the theme file editor, with a list of individual files in a left-side navigation and a main window displaying the code for the chosen file.
Each file you choose will open in a new tab within the editor, allowing you to work on, and cross-reference, multiple theme files at a time.
Choosing which theme files to edit in Shopify
In the left navigation, you’ll find all the theme files split into expandable segments, with each segment ordered based on how they work together:
The layout segment contains the theme.liquid file which is considered your master template. Any other templates or pages you create within Shopify are rendered (displayed) within your theme.liquid file.
This is where you’ll work with repetitive elements that will display throughout your entire Shopify store, like your menu and other header elements as well as your footer.
The templates segment contains all the precreated page templates that exist for your Shopify theme. Any theme you license for your store will be made up of template files that control how content is displayed on individual pages.
When you create a new page in your Shopify store, you’ll be able to choose one of these templates.
Each template file is typically made up one or more sections, code snippets, and html.
Some templates may only contain one or two sections with a minimal amount of code, like this custom 404 template:
While others, like the product template contain a collection of sections to allow for more customization of the content on that page.
Within your theme files, the sections should be seen as individual, customizable components. When we covered the visual editor above, the sections being customized were based on these pre-coded sections.
Added in 2016 by the Shopify team, pre-coded sections make editing your theme files much easier (and faster).
For example, instead of editing multiple pages where a newsletter opt-in is displayed to ensure it displays properly, you only have to edit a single section file. The changes you make will show across your entire store on any page that references that section.
Any of the sections you include in your page template can later be added and customized easily within the visual page editor in Shopify.
In addition to editing the existing theme files in Shopify, you can also create new theme files.
For those who prefer full control over the customization of their store, this is the best way to quickly create a new landing page template. You can edit the code to add any sections you like. Once the template is completed, you can later use that template when creating new pages for your Shopify store.
Liam Griffin, Partner Education and Developer Advocate at Shopify wrote a thorough guide showing how to create page templates using custom sections.
Tips for Editing Shopify Theme Files (Don’t Skip This Part)
Start by editing CSS
One of the simplest ways to customize the appearance of your Shopify store is to make edits to the theme’s CSS file. This is also considered to be the approach with the least likely chance of “breaking” the way your theme displays.
Within your theme options in the visual editor you’ll have some basic control over style elements. However, editing the CSS gives you more control over the placement of elements, spacing, fonts, color, and more.
Snippets are a great resource when editing your theme files in Shopify. Snippets are reusable segments of code kept in a single place. When editing your template files, you can refer insert a snippet reference. This will trigger the snippet, saving you the time of coding the same thing over and over.
Also, when you make a change to the snippet code itself, that change will be active on all templates/pages that reference that snippet. This makes any future updates much easier.
Make backups of your theme
When working in the theme editor you’ll see the option within each file to view older versions. This lets you revert back to a previous version if the changes you make to a theme file don’t work as expected.
Despite having access to previous edits, you should still make backups of your theme files.
The easiest method is to duplicate your theme before you make any changes, especially significant changes that could impact functionality.
To duplicate your theme, navigate to the Themes page. Click on “Actions” and choose “Duplicate”.
When you duplicate your theme, Shopify will create an exact copy of the current version of all theme files. It will be displayed in your Theme Library as a “Copy of <theme name”>.
This duplicate is inactive and will not impact the load times, speed, or functionality of your live store. At any time, you can revert back to that version of your site by clicking “Action” next to the duplicated theme and choosing “Publish”.
Because you can have more than one duplicate, and you’re likely to make additional backups, rename your duplicate theme in a way that makes the version easy to identify, like including a time stamp in the name.
Keep a record of file changes
The longer your store is running the more functional and visual changes you’ll be making. Even with regular backups, you should still keep a log of the changes you make to your site.
It may sound tedious, but they don’t need to be incredibly detailed.
Just create a simple document or spreadsheet that tracks the who, what, when and a simple why summary of the change.
You can also leave comments directly in your code in Shopify when editing them files.
For your standard html files, you can place comments between comment tags.
For JS and CSS files, you’ll use two forward slashes with your comments placed between them.
Use Inspection tools before customizing
If you have limited experience with website customization, there are tools you can use to help understand how certain segments of HTML and CSS impact the way your store is displayed.
In Chrome, you can use the inspector tool to identify certain elements you want to change then use that code to edit your theme files.
To use the tool, right click in the page you want to inspect (control + click on Mac) and choose “Inspect”.
Make small changes in steps
Shopify themes are typically designed with an larger purpose in mind, not just to be visually appealing. In many cases, a theme is designed for a specific approach such as mobile-first eCommerce, stores that sell only one type of product, or perhaps catalogs that need to be displayed a certain way for enterprise-level stores.
When you make a lot of visual changes to those theme files, it can sometimes inhibit the intended purpose of a theme and even create friction during the shopping experience.
Editing your Shopify theme files should be done in small incremental changes. Once you make your edits, be sure to preview and test those changes to ensure they work as intended without impeding the functionality of your theme.
Edit Your Shopify Theme Files to Build a Visually-Stunning Shopping Experience
Shopify users have plenty of themes to choose from, from free to premium, that offer beautiful visuals and design elements that compliment the native functionality of the platform. Still, every eCommerce store is unique and you’re likely to want to make some changes. While Shopify offers customization that requires no knowledge of code, you have more options available to get the visual design of your store just right.
Editing the theme files in Shopify gives you more control over customizing your Shopify store. Once you spend some time learning HTML and Liquid, you’ll be able to make visual edits on the fly. This allows for more rapid deployment of updates. It also reduces the need to spend on design and developer hours. If you can’t find the right premium theme for you store, use the tips above to customize your current theme to better meet your needs.
Still have questions about Shogun?
Get in touch with us and we’ll put you on the right track towards making unique, fully customizable storefronts.