0

Your Cart is Empty

by Michael P. Hill June 02, 2015

Update: The latest version of our Shopify Theme Updater App now supports migrating over customizations under select circumstances. However, the tips below are still best practices to make organizing your code easier and ensuring smooth updates.

Shopify themes from Out of the Sandbox already come packed with tons of great features that are easy to configure using the built-in configuration panel — but there comes a time in many online stores' lives when a more advanced customization is needed.

Of course, these types of customizations aren’t for the faint at heart — they do require knowledge of HTML and CSS as well as Shopify’s templating language, Liquid.

However, Shopify’s excellent documentation often suggests these types of changes and they even will sometimes provide the code needed, so this is a good concept for any Shopify store owner to know.

One of the biggest pitfalls of making updates to the code of your Shopify theme, however, is that they likely will get overwritten if you ever update your theme in the future.

Most theme publishers, including Out of the Sandbox, provide regular theme updates to add new features, support compatibility of new Web technologies or fix bugs that are discovered, so keeping your theme up-to-date certainly has its advantages.

Before you customize

It’s worth noting that, before you start any advanced customizations, to consider the pros and cons of making these types of changes. How vital is the change you are thinking about making? Also consider if there’s a way to accomplish the adjustment using one of the theme’s built-in settings in a way that doesn’t require code wrangling.

These questions are all worth weighing since, even with the tips contained in this document, there are always downsides to modifying code.

Finally, it’s worth remembering that you should always save backups of your theme at each stage. Although Shopify does offer an edit history, you never know if it will work correctly and it’s always better to have a fallback copy of your own.

A few notes before you begin

Modifying themes using the methods discussed in this post do require at least intermediate knowledge of CSS, HTML, liquid and coding principles in general, so be sure you’re comfortable with those areas before attempting any.

If you need an intro to CSS and HTML, try this CSS intro guide and this HTML intro guide. There are also tons of great resources and online classes, both free and paid, that you can find with a simple search.

If not, consider hiring a third party expert to help customize the theme.

And, just to re-emphasize this point, always make sure you have a backup of your theme files that you know works so you can revert to that if needed.

If you run into issues, a good place to start is the Shopify Forums, where you can get free advice from other users.

Custom CSS

One of the simplest ways to make adjustments is via CSS. This is probably the least destructive method as well. These types of changes are best if you need to adjust the color, font, size, spacing or placement of elements that aren’t controllable by the theme’s options panel.

To get started doing this, you can add custom CSS to the end of the styles.scss.liquid file.

How to locate the "more" icon in the Shopify theme area.
  1. Access the Themes area of your admin panel and click the “more” icon in the upper right (this looks like three dots). Then select Edit HTML/CSS from the flyout menu that appears (shown above).
  2. You’ll now see Shopify’s theme file manager, which has a narrow white bar just to the right of the Shopify admin bar (see image below this list for details). Scroll down in this toolbar until you see the Assets folder and click on it to expand it if necessary.
  3. Click the file styles.scss.liquid and scroll all the way to the bottom. Add your custom CSS code here.
  4. Now, any styles you add to the custom-styles.css.liquid asset, including overrides, should overwrite any of the themes built-in styles thanks to CSS’s precedence rules.
A quick tour of the Shopify theme code editor view. The left area, outlined in red, is the standard Shopify admin navigation bar. The middle column, outlined in green, is the file and folder list. Click the blue folder icons and name to expand. Finally, the largest and right-most panel (outlined in blue) is the code editor. Edit code here and use the save button in the upper right to save your work.

Custom code and template modifications

Some customizations, however, take a bit more than just changes to how things look.

For example, you may need to add a custom block of text to some of your pages to give users more information or add functionality (one example seen frequently is to add a block of text and images to promote PayPal’s Bill Me Now offering).

To do this in an easy way that’s also easy to add back in after a theme update, you can make use of Shopify theme snippets by following these steps:

  1. Access the Shopify theme file manager as described above.
  2. Select the Snippets folder and click to expand if necessary. Then click Add a New Snippet.
  3. Enter a name for your snippet. For consistency and ease-of-use, it’s a good idea to stick to lowercase letters and replace spaces with hyphens. Also use a descriptive name so you’ll know which snippet is which.
  4. Click Create snippet and you should see a blank file. Add any HTML code in here, which can also include Liquid tags. Save your work.
  5. Now, locate the Templates folder (or, if you want to add this custom code on a site wide basis, find theme.liquid in the Layout folder). Locate the file that controls the page type you want to add this custom code to. For example, if you want to add this custom code to your product pages, find product.liquid.
  6. Click the file you want to edit and it will open in the right side of the screen. Now, hunt around in the code for to find where the custom code should be added. Once you locate it, place your cursor there and add this include code:
    {% include 'snippet-name' %}. You’ll want to replace snippet-name with the name you gave the custom code snippet in step 3.
  7. Click save and preview your work. The new code should now appear in the location you added the special tag to.

Time to update?

When it comes time to update, you’ll want to follow Shopify’s excellent guide here for some tips on what is, unfortunately, a bit of complex process.

Once you’ve completed these steps, you’ll need to take some steps to restore your customizations.

  • First, move the custom code from the end of the styles.scss.liquid file to the new theme version.
  • Second, manually recreate any snippet files and copy and paste the custom code from your old theme to the new copies.
  • Next, update any Liquid files with references to Snippet files or other customizations.

Log your changes

As you can see, any upgrades still require some manual updating, so I like to maintain a list of every custom CSS and snippet modification a theme uses along with the filenames and line location where the include tags need to be added.

Although the line numbers may vary slightly when a theme is updated, at least you’ll have a good idea of where to start looking.

Advantages

Although these techniques may seem a bit complex, because you’re isolating the custom code you create into separate files, it’s also a lot easier to maintain them when updating a theme. Imagine if you went in and customized dozens of different CSS declarations all over the theme’s CSS file or added HTML code directly to all of your theme’s Liquid files in multiple locations. It would be a nightmare to keep track over where every change you made is.

In addition, these techniques have the added advantage that, should you run into compatibility issues with your customizations, you can easily remove the include tags temporarily as a well to isolate the issue.

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.


6 Responses

Michael
Michael

October 26, 2016

@Jonas: We do major updates to our themes that include new features a few times a year, but there are numerous other smaller updates, mostly for bug fixes, throughout the year.

Sharath kumar
Sharath kumar

September 20, 2016

Hi Michael,

Am new to liquid based theme, i did work on websites using html and css. But is there a way to convert or use the liquid template as usual php,html,css files. After purchasing a theme on Shopify, I had modified that theme, and after downloading the theme files, so to test on a hosting server, am unable to know what files are to be used, to test the website. In the Assets folder, i see all the modified files. Could i get help on this please?

Neal J Fitch
Neal J Fitch

August 22, 2016

Very well written and helpful! Thank you!

Sheraz Ahmed
Sheraz Ahmed

August 04, 2016

Thank You Very Much!

Brad
Brad

July 28, 2015

Hey Jonas,

The Retina theme is periodically updated every few months. However, theme updates are always optional and are not necessarily recommended for highly customized shops – unless you’ve customized the theme in non-destructive ways :)

Cheers!

Brad Miller
Out of the Sandbox

Jonas
Jonas

June 11, 2015

Hi Michael -

This was a helpful post. I’m a Wordpress guy who is looking at making the jump to Shopify for ease of use and performance (speed especially) but I’m shocked that this is the way that Shopify handles updates. Wordpress certainly isn’t perfect but at least with parent-child theme structures you can ensure customizations generally don’t get buggered when there is a general update. Seems odd that this is still an issue with Shopify. Yikes!

Out of curiosity, how frequently are themes like Retina typically updated? That’s the one I’m thinking about using…

Jonas


Also in Shopify Theme Blog

Strategic Content Marketing 101: Fueling your blog, social media and SEO efforts
Strategic Content Marketing 101: Fueling your blog, social media and SEO efforts

by Michael P. Hill May 26, 2017 0 Comments

Over the past few weeks, we’ve taken a look at how you can pick a topic for a content marketing guide , how to write and design it and use it to build your email list — now it’s time to come full circle and see exactly why I refer to it as “centerpiece content.”
Read More
Strategic Content Marketing 101: Using your centerpiece content to build your email list
Strategic Content Marketing 101: Using your centerpiece content to build your email list

by Michael P. Hill May 16, 2017 0 Comments

Once you’ve completed writing and designing  your centerpiece content on the topic of your choice , it’s time to put it to work for you — helping you build your business by generating leads and building your email marketing list.
Read More
Strategic Content Marketing 101: Writing and designing your centerpiece content
Strategic Content Marketing 101: Writing and designing your centerpiece content

by Michael P. Hill May 10, 2017 0 Comments

Creating centerpiece content is a great way to share your passion for your products and industry while also integrating your SEO, social media and content marketing strategy for weeks or even months to come — but how can you create a dynamic and informative content piece?
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …