How to Edit Shopify a Theme

Choosing the theme for your Shopify online store probably took you some time (themes are something most website builders like Wix or WordPress will have in common). Indeed, it takes a bit of brainstorming to pick the right one (from so many) that will define the overall look and feel of your site. And now, you want to customize its look and function to further tailor it to your needs (and your customers’). We get that, and we agree – that’s why we are dedicating this whole post to showing you how to edit your Shopify theme (and check here to find out which theme a store is using).

Basically, you can edit your site’s theme by using the theme editor from the Theme Settings section (accessible from your Admin page). However, there are themes that don’t carry this feature – and if that’s the case, you will need to edit your theme code by dealing with HTML, CSS, and Shopify’s Liquid coding language. Btw, this goes way beyond doing simple edits like removing the Powered By Shopify line. On a side note, you will need Shopify Plus to edit the checkout section of your store using the checkout.liquid file.

We’ll show you those 2 methods below.

How to Edit Shopify Theme

Method 1 – Editing the Theme Settings

For this method, follow the steps below.

  1. Log in to your Shopify account.
  2. Click Online Store.
  3. Click Themes.
  4. Look for your particular theme and click on it.
  5. Click Customize.
  6. Look over the different types of pages for your particular theme (e.g. Home Page, Password Page, Product Pages, Collection Pages, Blogs, Cart, etc.).
  7. Click on the theme pages that you want to edit and configure the settings on each one.
  8. Click Save every time you make a change.

Notes:

  • Before customizing your theme, make sure that you create a backup copy first. This way, you can always discard the changes you’ve made and start over again (if needed).
  • You can edit and modify your theme’s layout, colors, fonts, check out settings, social media links, etc.

Method 2 – Editing the Theme Code

If you’re going to use this method, follow these steps:

  1. Log in to your Shopify account.
  2. Go to your Admin panel.
  3. Click Online Store.
  4. Click Themes.
  5. Click Actions.
  6. Click Edit Code.
  7. Look at the directory of Theme files and edit each one as needed. The Theme files are listed on the left (e.g. Home, Order, Products, Customers, Analytics, Apps, etc.).
  8. If you want, you can enlarge the code editor screen by hitting the expand icon (arrow pointing up). You can then return to normal viewing by clicking on the collapse icon (arrow pointing down).
  9. If you want, you can change the code editor color scheme from light to dark (while in full-screen mode). The toggle button can be found at the lower part of the page.
  10. If you want, you can retrieve an older version of a page theme even after saving by following these steps:
  • Open the particular page file.
  • Click Older Versions.
  • Look at the versions from the drop-down menu – the date and time for each saved action will be shown here.
  • Click on the version that you want to go back to.
  • Click Save.

Notes:

  • Shopify’s templating/ coding language is called Liquid.
  • Before customizing your theme using this method, make sure that you create a backup copy of your original theme first. Doing so will allow you to retrieve your original theme should you mess up the codes in the Theme codes.
  • We suggest doing this method only if you know basic Liquid language and have some skills in coding (HTML and CSS).
  • You can edit multiple files in the Theme code at the same time.
  • Modified files will have purple dots next to their file name (this will help you keep track of your work).

Editing Your Shopify Store’s Theme

We have just shown you 2 methods on how you can edit your Shopify’s theme. Choose the one that’s applicable to your theme and coding skills. That being said, if you want even more flexibility with your designs, consider checking out WooCommerce, we made a pretty comprehensive Shopify vs Woocommerce comparison for you to go through.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top