Shopify has some of the most well-designed themes among the current ecommerce platforms. When discussing design, we’re not only referring to the visual aspects of Shopify themes. We’re talking about the overall architecture that makes them flexible, functional, and delightful to use.
All these attributes can be achieved by knowing how to use the Shopify theme editor effectively to achieve the look and feel that’s unique to your brand.
In this article, we’ll give you a tour of Shopify’s proprietary theme editor and we’ll teach you the different ways on how you can elevate your Shopify theme. Let’s begin.
What Is The Shopify Theme Editor?
The Shopify theme editor is the platform’s user-friendly tool that allows online store owners to customize their stores’ appearances and layouts using its intuitive drag-and-drop function. This means that even a novice could make a visually appealing and professional-looking Shopify store because there are no code-editing skills required to do so.
Thus, understanding how to use the theme editor is a crucial skill for a Shopify store owner like you as this will allow you to make necessary visual changes without spending money on web developers or web designers at the beginning of your ecommerce journey.
Where Is The Theme Editor In Shopify?
The first thing you need to do if you want to customize your Shopify theme is to open the theme editor. Fortunately, the Shopify admin is properly designed so that everything is easy to find.
In your Shopify store admin, click the Online Store menu and select Themes.
This will open the tab where you can find all your installed themes. Then, click Customize so you can open the theme editor.
Here’s what the theme editor looks like:
Things To Remember When Editing Shopify Theme
There are some things that you need to remember when editing your Shopify store from the theme editor. These things will help you do your customizations with safety in mind so you can avoid unnecessary mistakes in your online store.
Here are some of them:
Do not edit the live theme directly
The instructions in the image above show you how to edit your live Shopify store theme. However, to add an element of safety to your customization process, we recommend duplicating your live theme and doing the edits on that duplicate copy.
The process is fairly simple to do. Click the three-dot button beside the Customize button and click Duplicate in the drop-down options. After that, a copy of your theme (No. 3) will be automatically created (this could take a few seconds to a few minutes depending on the content of your store).
Within the section of the duplicate theme, click the Customize button and the Shopify theme editor will be opened.
By editing a duplicate copy of your theme, you can ensure that nothing will be broken in your Shopify store while you do the editing. After customizing your theme, click Publish on the duplicate theme section and it will then be pushed to your store to replace the current theme.
You can also try out other Shopify themes in the theme editor for free
Although you can only use one theme for your Shopify store, you can install several (up to 20) Shopify themes so you can try and customize them. At this trial stage, you don’t have to pay for the themes yet. You only have to pay if you decide to publish the paid theme to your live store.
Thus, you can go to the Shopify theme store and select the theme that you want to try. Let’s use the Shine theme as an example. Simply click the Try theme button and it will be installed in your theme library.
The Shine theme is now installed in your Shopify store and you can explore it in the theme editor.
Two Ways To Modify Your Shopify Theme
There are two ways to customize Shopify stores:
- By visually editing your online store via the theme editor
- By editing the Shopify theme files using the theme code editor
Let’s compare the two methods and figure out which one is best suited for you.
Using The Theme Editor
As mentioned, the Shopify theme editor has a user-friendly interface that could accommodate all types of users – from beginners to professionals.
It is best to use the theme editor if you want to implement visual changes to your store such as fonts, layouts, typography, imagery, etc. For most use cases, the theme editor is enough to create a unique-looking store if combined with proper design knowledge.
Furthermore, the theme editor is also safer to use because you are not altering the architecture of Shopify themes. As such, the themes remain stable and the possibility of functionality errors is little to none.
Tip: If you want more advanced customization without using the theme code editor, you can use Shopify apps like PageFly. This app has a familiar interface but it allows more advanced designs such as animations and other effects.
Later in our article, we'll guide you throughout how to customize Shopify themes using apps.
Using The Theme Code Editor
On the other hand, we have the Shopify theme code editor. This type of editor is best used by experienced web developers and designers who are familiar with Shopify theme files and the programming languages used by Shopify.
Imagine the theme code editor as unlocking the full potential of Shopify themes and you can even add some functionalities that are not native to your chosen theme. That is if you know how to code.
But if you want to go down this path, you don’t have to do it yourself. You can enlist the help of Shopify experts to edit code for you for safer and more efficient customization.
In case you’re curious, here’s how to open the code editor:
- Go to your Shopify theme editor
- At the top-right of the screen, click the three-dot button
- Select edit code from the drop-down functions.
You’ve now opened the theme code editor. On the left panel are the theme files.
A Quick Tour Of The Theme Editor On Shopify
The Shopify theme editor is composed of several parts, and knowing the functions of all these components is crucial to making you work more efficiently. With this knowledge, you’ll also be able to implement more customizations to your Shopify store so you can curate a standout brand.
Let’s take a look at all the parts of the theme editor.
01. Sections, Theme Settings, and App Embeds
These three buttons at the left-most part of the Shopify theme editor have a lot of different uses – all of which are crucial in customizing your store.
Sections
The Sections button contains the primary interface that you see every time you open the theme editor. This button gives you an interactive overview of a specific page’s content hierarchy.
Additionally, this is where you can customize the visual layout of your store. You can drag sections of your web pages to change their hierarchy and see the changes happening on the main screen as you make the edits.
Theme settings
The Theme settings button gives you access to tools that will help you customize various elements of your store such as color schemes, typography, animations, favicon image, etc. You can also add custom CSS snippets via this menu if you want to create advanced changes to your store while still not touching any of your theme files.
And just like the Sections menu, you can see changes as they happen in the main screen of the theme editor.
App embeds
Some Shopify apps need to be activated before you can use them on your online store. When you get the prompt to activate a newly installed app, the App embeds menu is where you should go.
Simply toggle the switch beside the app to activate it. After that, you can use your newly installed app.
02. Main Screen (Or Preview Screen)
The Main Screen or Preview Screen acts as your visual reference when you’re customizing your Shopify store via the theme editor. This takes the guesswork out of the equation as changes are automatically reflected in this screen whenever you change the element of your store.
The good thing about the main screen is that it’s interactive just like your live Shopify store. As such, you can click on the menu buttons on the main screen and it will load that page. This minute capability gives users a seamless customization experience.
Take note that when you switch from one page to another, the content of the Sections button will also change to reflect the content hierarchy of the selected page.
03. Settings Panel
The Settings Panel, located at the right-most part of the browser screen, is another major feature of the Shopify theme editor that contributes to an easier design process.
This panel is particularly useful when navigating the Sections menu of the theme editor. Whenever you click a section of your page, a corresponding set of settings will appear on this panel. Here, you can fine-tune the elements of each section.
Single Sidebar and Double Sidebar modes
You have two options when using the theme editor, these are the Single and Double sidebar modes which alter the location of the settings panel. Depending on the screen size of your computer, these can come in handy.
The Double sidebar mode, as shown in the image above, displays the settings panel at the right part of the screen. This will be the default view of the theme editor for bigger screens.
But if you are editing Shopify theme at a smaller screen, say using a laptop, the Single sidebar mode lets you see more of the main screen as it removes the settings panel from your view.
To enter the Single sidebar mode, simply zoom in to your browser until the settings panel is removed.
After doing so, the settings panel will be accessible through the Sections panel. Then, when you click a section in your theme editor, the settings panel will be revealed in the same location.
The single sidebar not only saves screen space when you’re editing on a smaller screen, but it also slightly enlarges the preview screen so you can see it a bit bigger.
04. Storefront Selector
At the top-middle part of the theme editor, you can find the drop-down selector for storefronts. If you just started your online store, you will only have the Default option. Thus, you don’t have to worry about it.
You only have to touch this button if your online store has several storefronts. And in doing so, you’ll only edit the selected storefront.
05. Page Selector
Beside the storefront selector, you have the Page Selector. This drop-down menu reveals a list of pages in your online store. This gives quick access to any page that you want to customize on your Shopify store.
06. Page Inspector
This tiny arrow icon is called the Page Inspector. When deactivated, your main screen acts like your live store in that when you click page buttons, they will redirect you to other pages or perform their intended functions.
On the other hand, when activated, the Inspector lets you click sections from your main screen to easily reveal their settings.
07. Screen Modes
Beside the Inspector button are the Screen Modes of your Shopify theme editor. The default view of the theme editor is the desktop mode which shows the appearance of the website when viewed from a computer.
The middle button is the mobile screen mode. When you click this button, it will show the appearance of your website when viewed from a smartphone.
Lastly, the full-screen mode expands your preview screen to the full width of your laptop or desktop screen.
Checking your website’s appearance on various screen sizes is important during customization as this will help you get the right proportions.
Especially nowadays where smartphones constitute 78% of global retail traffic. (source: statista.com)
Thus, it is important to optimize your online store’s appearance for both desktop and smartphone users.
08. Preview
The theme editor’s Preview button is hidden in the three-dot menu at the top portion. Click that button and select View to open another window to preview the live appearance of your store including the changes that you made.
Other options included in the drop-down button are:
- Edit code - access your theme files
- Edit default theme content - access to the content editor where you can change the default wordings of the theme
- View documentation - access the developer documentation of your current theme
- Keyboard shortcuts - gain information regarding keyboard shortcuts for faster editing
- Get support - quick access to the theme developer’s support theme
Editing tip: Always make sure to have the Preview window open whenever you’re customizing your online store. As you make changes on the Shopify theme editor, simply refresh the Preview window and you’ll see the changes.
09. “Save” Button
Finally, the Save button is the one you click after finalizing all your edits. Be sure to click this button before you close the theme editor window, or else, all changes will be lost. And only click this button when you’re sure that you want to save all the changes that you made to your store.
As we previously mentioned, remember to duplicate your current theme and edit your store on the duplicate file so your customers won’t see page errors if they happen during your editing process.
That wraps up our tour of the Shopify theme editor. If you want a more in-depth tutorial, we highly recommend watching this video by Jason Gandy.
How To Customize Shopify Themes Using Apps?
We’re not done yet!
Before we wrap up this article, we want to share another way to edit your Shopify theme. And that is by using a specialized page builder app like PageFly.
PageFly is the most popular landing page builder for Shopify particularly because of the immense flexibility that users gain by using it. Designers can create all kinds of pages using PageFly as well as various types of animations – all without having to type a single line of code.
Furthermore, you won’t get lost in PageFly’s theme editor because it works the same way as Shopify’s theme editor, except for the added features that are native to PageFly.
If you want to overhaul the appearance of your Shopify theme, you can choose a page template from our collection of 100+ pre-built page templates for various use cases – landing pages, home pages, product pages, etc.
Conclusion
Shopify is a very capable ecommerce platform out of the box – not just in terms of functionalities but also in terms of design flexibility. All of these while still maintaining snappy loading times that positively affect online store sales.
As powerful as it is, customizing your Shopify store isn’t as complex as customizing a WordPress website. Instead, Shopify has spent a lot of effort into making its platform extremely easy to use – especially the theme editor.
The Shopify theme editor is an intuitive and powerful tool that you need to master if you want to achieve unique branding for your online store. By mastering all the components of the Shopify theme editor, as explained in this article, you’ll be on your way towards creating a stunning online store.
As for the theme code editor, we don’t recommend using it for editing unless you have an understanding of Shopify’s programming stack.
Instead, if you want to implement more advanced customizations, veer to the safer side and use a page builder like PageFly.
Read more: [Tutorial] How To Make Your Shopify Themes Responsive With PageFly
![Top 33 Best Shopify Themes of 2024 for New Merchants [UPDATED!]](http://pagefly.io/cdn/shop/articles/best_shopify_themes_1.png?v=1709104601&width=1640)
