Shopify Edit Theme: The Complete Guide to Customizing Shopify in 2023

With so many unique Shopify themes available, each brimming with its distinct look and features, it can be tricky to locate the perfect one for your brand. But sometimes, you need to edit your Shopify theme to get your desired look.

Don’t worry. If the visuals of your theme don’t appear right, they can be altered. And don’t think you’re stuck with one and only one theme.

Shopify allows you to store up to 20 different themes in your library, which means that you can customize or swap out what’s currently on display at any point in time.

If none of these options are unique enough for your needs, then consider starting from scratch and building a completely custom theme yourself!

Whatever theme you decide, it can be modified to fit your preferences better.

Before we jump into the code, let’s ensure everything is done correctly. After all, it pays to do things properly from the start!

Before editing your theme, remember these things.

With Shopify, any changes you make to your theme – whether through the theme editor or code editor – will take effect immediately when you click “Save.”

Taking a backup of your theme is mandatory before proceeding with any modifications in the code editor, as even minor mistakes can damage the aesthetic design of your store.

Before setting off on your own Shopify theme development mission, you’ll need to be familiar with HTML and Liquid coding.

Although coding is not for everyone, that’s all right.

If the changes you need to make are beyond what can be done through Shopify’s visual theme editor, bring in a Shopify developer, and they will get your business up and running where it needs to go!

How to edit your Shopify theme

You have two options to customize your Shopify theme: edit it yourself or enlist the help of a professional. You can edit your theme via:

• Shopify theme editor
• editing Shopify theme files directly

If you’re not tech-savvy, then Shopify’s theme editor is an excellent choice for making your desired look and feel changes. It allows users to create customized visuals with the limited technical knowledge required.

Are you willing to dive into the depths of Shopify’s Liquid code? If so, head over to the code editor and make whatever adjustments are needed for your theme files.

Before making any changes, be sure to create a duplicate of your theme.

Now, let’s analyze both techniques for enhancing your theme. First and foremost, Shopify’s Theme Editor.

How to use the Shopify theme editor for customization

To access your Shopify theme editor, go to Online Store > Themes and locate the desired design.

Your live theme will be displayed in the ‘Current Theme’ section, while any other themes can be found under ‘Theme Library.’

Take your pick from our vast selection of themes, then click the “Customize” button to be taken swiftly to the theme editor.

The theme editor allows you to customize how content is arranged on your store’s page templates. You can easily add, rearrange and adjust each section’s settings to create the perfect look for any template!

At the top of the page, a drop-down menu provides direct access so that navigating between pages couldn’t be simpler.

Upon entering a section, you will discover the customization options on its right side. In some sections, some blocks can be altered and rearranged as well.

Vintage themes vs. Online Store 2.0 themes

Certain themes limit the page templates that can be personalized. These are older themes, called “vintage themes” by Shopify.

After 2021, Shopify debuted the new Online Store 2.0 (OS 2.0) themes.

These themes make it easy for merchants to fully customize any page template on their store, and they are no longer restricted to customizing just their homepage.

The once-standard Debut theme has been replaced with the OS 2.0-enabled Dawn theme, which is part of an update aptly termed ‘Sections Everywhere.’

The new upgrade gives merchants a much easier way to personalize their themes, granting them more control over their stores’ appearance and feel.

How to modify theme settings

Apart from the theme editor, you can customize your store’s general settings to transform its look and feel.

To access your Theme Settings, click the ‘Theme settings’ button located at the lower left portion of the screen. Once clicked, this menu will appear on the right side of your display.

You can customize the following:

• Colors. Make a splash with your brand colors – from buttons and text to accents and backgrounds!
• Typography. Enhance your typography today with the perfect font pairing.
• Layout. Align page width, adjust the vertical spacing, and fine-tune grid spacing to ensure a perfect layout.
• Buttons. Transform the look and feel of your buttons by customizing their borders and shadows.
• Favicon. Add your favorite image to create a unique favicon for your website.
• Checkout. Transform the look and feel of your checkout page to maximize customer experience.

Edit Shopify theme files by changing the code

If you want to make changes directly in the code, accessing Shopify’s code editor is also an option. By navigating your way into its depths, you can easily tailor your theme to your needs!

Shopify code editor

To quickly access the code editor, click on the three dots icon in the upper left corner of your theme editor and select “Edit code” from the drop-down menu.

It is that easy! Quickly get to where you need to be: take a few seconds out of your day and gain full access to customize your website’s code as fast as possible.

If you’re in your Shopify dashboard, follow these easy steps:

• Navigate to the Themes section.
• Click “Actions.”
• Select “Edit code” from the drop-down menu.

With this simple action, you’ll be well on your way.

You will now be greeted with seven folders:

• Layout
• Templates
• Sections
• Snippets
• Assets
• Config
• Locales

These folders host your theme files. They determine how all your content appears on the store, so it is essential to ensure that these are up and running correctly.

As you navigate the theme files, they will magically appear in a new tab on your editor. This makes it simpler to switch between different pages while making modifications.

Shopify layouts

This folder contains the master template for your theme: theme.liquid.

All the templates you design or modify in Shopify are rendered inside this file, so it’s a vital part of building and customizing your store.

By incorporating your theme’s recurring elements, like headers, footers, and menus, into its design, it provides a unified experience for users.

Shopify templates

The templates folder holds all the page designs for your shop, deciding what is displayed on each page.

Depending on which theme you opt for, there will be a range of pre-made layouts to choose from when creating a new page. So, pick one of these templates and make it look exactly how you want.

Templates comprise sections, snippets, and HTML that can be combined to create a single file.

404 pages are generally concise, with just a few sections and limited code. On the other hand, product page layouts extend further in length and complexity: they feature multiple Liquid-coded segments.

Shopify sections

Shopify sections are pieces of a page template that can be customized to your needs.

We discussed how in the theme editor, you’d find these sections on the left side of the screen. You can move, add or customize them as much as you wish – and create whatever layout you desire!

Shopify took customization to a new level in 2016 by introducing sections. Fast forward five years later, and with the release of Online Store 2.0, any page template has access to these invaluable sections to create an even better shopping experience for customers.

Every time you edit a section theme file – let’s say the contact form, for example- that alteration will be effective and exhibited throughout your entire website.

Installing and customizing sections to your page template is effortless through the Shopify theme editor.

Furthermore, you can easily craft custom section themes for your website.

If you’re searching for maximum control of the customization options in your store, this is the ideal way to create a new landing page template.

Not only can you refine and edit the code on Shopify as needed – adding any sections that appeal to you – but once it’s finished, all future pages on your Shopify store will be created using this template.

Shopify snippets

The snippets folder contains Liquid files containing small but powerful code blocks to be used repeatedly in your theme design.

You can quickly and easily render the same snippet multiple times across your website by simply calling its name in different theme files. This eliminates tedious, time-consuming coding while giving you access to the same great features repeatedly.

When you modify the snippet code, that alteration is immediately apparent on every template and page associated with the snippet.

By incorporating snippets into your website, you can future-proof it and make any alterations or updates far more manageable.

Top tips for editing Shopify theme files

When editing any of your theme files, it is essential to remember some crucial tips for a successful outcome.

Backup your Shopify theme

To keep track of your progress and to ensure that you don’t start making alterations without first documenting the original state, it is essential to document what things looked like before getting started.

It is a good idea to always have a backup of your theme. Even though the code editor records changes and makes them easily accessible via “Older versions”, it pays off if you also maintain a new, unmodified copy at hand.

To preserve the original version of your theme, be sure to create a duplicate.

To duplicate your theme, visit Online Store > Themes and click Actions on the particular theme. From there, select Duplicate from the drop-down menu to begin making a copy of it!

As soon as you opt to Duplicate, a replica of your theme will appear in the Theme library labeled “Copy of [theme name]” and it needs a few minutes to finish copying.

With this precise copy of your theme, you’ll have the ultimate security at your fingertips. If something happens, you can rest assured that you won’t be left hanging.

To ensure clarity, rename your replicated theme (Actions > Rename) to reflect the version. Renaming it with a timestamp is an ideal option for this task.

Edit Shopify CSS

Before delving too deep into Liquid, why not experiment with edits to your Shopify CSS theme files?

This is the easiest way to personalize and adjust the look of your store from within the code editor.

By editing the CSS files directly, you can customize your website to have more control over the layout of elements, font sizes, spacing, and colors. This allows for much greater freedom in terms of design and creativity.

Use inspect function to do customizations.

Knowing how your modifications will appear on the actual storefront can be hard to comprehend, as coding is an abstract concept.

Thankfully, you can access free resources that allow you to experiment with changes and witness their impact on your store.

In Chrome, it’s effortless to discover the code for some aspects of a page. All you have to do is right-click on the element and pick “Inspect” from the drop-down menu, then you’ll be able to access its inspector tool!

Be on the lookout for a pane that may show up along either your browser’s right side or bottom.

In the Styles tab, you can easily make creative changes to your viewing page that will be showcased in real-time.

Additionally, if you prefer tinkering with HTML code within the same section, you can instantly customize how content appears on said page.

You can monitor how your page would look with specific HTML and CSS changes without modifying any actual code through simple experiments like this.

Frequently Asked Questions

How do I edit the CSS of my Shopify theme?

To edit the CSS of your Shopify theme, you will need to access the theme’s code through the Shopify admin panel. From there, you can navigate to the “Assets” folder and locate the “theme.scss.liquid” file. This file contains the CSS for your theme, and you can make changes to it directly. Be sure to save your changes and preview them on your live site before publishing.

Can I use a CSS preprocessor with my Shopify theme?

Yes, you can use a CSS preprocessor, such as SASS or LESS, with your Shopify theme. To do this, you will need to set up a development environment on your local machine and use a preprocessor to compile your CSS code. Once the code has been compiled, you can then upload the resulting CSS file to your theme’s Assets folder in the Shopify admin panel.

How do I override the default CSS of my Shopify theme?

To override the default CSS of your Shopify theme, you can create a new CSS file in the Assets folder and link to it in the theme.liquid file. This new file will take precedence over the default CSS and any changes you make to it will be reflected on your live site. You can also use the !important rule in your CSS to override any styles you want to change. Just keep in mind that using !important should be avoided as much as possible as it could create conflicts in the future.

Conclusion

Don’t let the aesthetics of Shopify themes fool you – each design has powerful features tailored to match the specific needs of authorized retailers. Not only will your store look great, but it will also be equipped with innovative capabilities for maximum success.

Some specific themes are tailored to mobile devices, while others have been developed for single-item stores or websites with extensive catalogs.

Customizing the look of your store could compromise its core functionality and harm shoppers’ experience.

To ensure that your modifications don’t result in poor usability, it’s best to work with an experienced developer who can ensure these changes are implemented to benefit both you and your customers.

To get the most out of your Shopify theme, adjust it gradually. Make small changes and preview your store often to see how they affect the look.

Once everything is in place and perfect, adopt this rinse-and-repeat approach for subsequent updates.

Keeping a level head and taking your time ensures that your store runs smoothly and provides an optimal customer experience.