Step-By-Step Guide to Editing Your Shopify Theme

The look and feel of any website determine the conversion rates on that website. The color, design, placement of elements, spacing are all part of a website theme and have a huge impact on the conversion rates. This helps improve the user experience therefore, you should focus on optimizing your Shopify theme according to the preferences of your customers. 

Unlike WordPress or other CMSs, Shopify is not very user-friendly and it is not easy to edit the theme. The Shopify theme editor is prone to many errors like the page breaking down, page not loading, network issues, invalid liquid CSS files. Sometimes, the default themes available in the Shopify theme editor are not the ones Shopify admin wants. Shopify provides you with an option to edit the Custom CSS file to implement the change as per your requirements. However, if you are not a coder or a programmer, it can be quite daunting for you. This article will simplify the steps to edit your Shopify theme safely and also guide you step-by-step to edit your custom CSS file. 

How to edit your Shopify theme safely

There are two ways to edit your Shopify theme – Using Shopify theme editor, Editing Custom CSS.

Using Shopify theme Editor

Shopify theme editor is the theme editing tool of Shopify that helps you change the look, feel, and design of your website without having to go through the hassle of editing the custom CSS code.

Steps to Follow:

• Make sure to duplicate your theme and back it up. You can do the editing in the duplicate theme. This will help you discard any changes and cover up your mistakes. Working on a duplicate copy won’t affect the look and feel of your live website and you can still preview the page and make changes accordingly. 

• Go to Shopify Admin > Online Store > Themes
• Select the theme that you want to change or edit and click on customize. 
• You can select the page for which you want to make the edit from the drop-down menu present at the top of the page. You can change the content that appears on the page, its layout, look, feel, and functions. 

Editing the Custom CSS file

Sometimes, the temes available in the Shopify theme editor are not the ones that you are looking for. This is when editing the custom CSS file comes in handy. Let’s look at the steps that you must follow in order to edit the custom CSS file. It is a code file where the HTML code is written. 

Step 1. Back up or Duplicate

Go to Shopify Admin > Online store > Themes. Find ‘Action’ on the top right of the page and click on ‘Duplicate’.

Working on a duplicate file helps you save your live site as the changes made by you are not reflected there. Even if you screw up in the duplicate file, you can simply delete it.

Step 2. Editing your Shopify Theme Code

Go to Shopify Admin > Online Store > Themes > Edit code. This leads you to the editor page and now you are ready to make the change to your theme. 

To make it simple we will make you understand with the help of just 2 files – theme. liquid and custom.scss.liquid.

theme. liquid is the master file or theme that gets loaded automatically while custom.scss.liquid is a file that overrides your existing theme styles or general styles. 

Note: If you don’t already have a custom CSS file, you can simply click on ‘Add a new asset’ and create a blank file names custom,scss. liquid. 

Now add this new file or the existing scss file in the head section below your default theme stylesheet file. It is important that you place it below the default styles sheet to ensure that it overrides the regular themes. 

Note: Use .scss file instead of using .css file to auto-minify your code and making the file lighter. 

You can add your CSS code comments to make people understand the function of a particular code. It will also come in handy when you revisit the file and act as a point of reference. 

Step 3. Changing the CSS code

You can use any form of Dev tools to inspect the elements present on your website. 

Press CMD+Shift+C if you are using a Mac or Control+Shift+C if you are using windows. 

A console opens up in front of you and you get a highlighter. The elements of your website will appear on your screen. You can click on the element that you want to inspect. Inspect the HTML code of that element and the CSS rules applying to it. Now you can change the color, layout spacing of the element you want to make the edit in. 

It’s better to edit the code in your browser before pasting it into your custom CSS file. You can add as many customizations as you want. 

Step 4. Save the change

You just need to save the change and publish the theme. The edit made by you will be published.

Step 5. Preview

You can click on the ‘preview’ to check how the change will appear on the website when it is published.

Step 6. Publish the theme

If you are satisfied with how the change or edit made appears on the screen, you can publish the theme by clicking on ‘Themes’ in the header section of the editor page. You will be redirected to your themes page. Now click on ‘Actions’ and select publish next to the new theme you have created. 

Your new theme will be reflected on your live website.

How to fix a mistakenly updated theme?

• You can revert back to ‘older versions of the files if you want to go back to the previous theme or undo the edit. 
• If you have downloaded a backup file before making the edit, you can upload it again and restore the previous theme.
• There are various backup apps that automatically backup your files, themes, blog posts, pages, etc.