0

Your Cart is Empty

by Michael P. Hill June 02, 2015

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.

A custom stylesheet

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, first create a new CSS file that will contain all your customizations. To do this, follow these steps:

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 Add new asset link. Select the Create blank file tab and give your file a name. I usually like to use custom-styles.
  4. From the dropdown menu, select the .css.liquid extension (be careful not to use .scss.liquid).
  5. You’ll now see a blank file on the larger, right hand panel of the theme file manager. This is where you can start typing your CSS declarations. Be sure to save your work as you go.
  6. To integrate your new stylesheet with your theme, scroll up on the list of folders and find the Layouts folder. If necessary, click to expand it and select theme.liquid.
  7. Now, locate the closing </head> tag. An easy way to do this is click in the code you see on the right side and then hit Ctrl ( Command on Mac) and the F key on your keyboard. A small search box will appear in the upper right of the code view. Type or paste in </head> (be sure to include the forward slash) and the code editor will “jump” to where this tag appears.
  8. Once you’ve located the </head> tag, place your cursor just before it and hit enter to add a new line. Then type or paste in this include code on its own line:
    {{ 'custom-styles.css' | asset_url | stylesheet_tag }}. Note that if you named your custom CSS file something other than custom-styles.css.liquid, you should replace “custom-styles” in this line of code with whatever you used. In addition, note that .liquid should not be included in this code.
  9. Save your work. 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.

If you only have a custom CSS file and a few custom snippets, one route is to open your CSS file and any snippet files up in the theme file manager on by one, select all of the code in the right pane and copy and paste each into a separate text file and save each to your computer (it’s a good idea to use the same names found in the file manager but leaving off any .css.liquid or .liquid parts).

Then, follow these steps:

  1. Create a blank CSS file using the steps above in the new version of your theme and then copy and paste your custom code into the file and save your work. Do this with any snippets as well.
  2. Open your theme.liquid file and add back the CSS include tag in step 8 of the first set of instructions above.
  3. Open any other template files and add back the include code found in step 6 in the second set of instructions above.
  4. A more advanced option, which can be more efficient if you have a large number of customizations, is to:
    • Request a ZIP file of the new and old themes. To do this, click the “more” button (with the three dots) next to the old version of the theme files and select the Download ZIP option in the flyout. Repeat this process with the new version of theme.
    • You should receive information in your email on how to download the ZIP file (this email may take a few minutes to arrive).
    • Unzip both versions, making sure you identify which is which by giving them clear, distinct filenames.
    • Copy any custom CSS or snippets over from the old version files to the new one, being sure to place each in the correct folder (assets for CSS and snippets for code snippets).
    • Open the Liquid files and add back the tags mentioned above.
    • Re-compress the all of the folders back into a ZIP file and upload this updated file to your Shopify account.

As you can see, both methods 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

Using your Shopify theme's password page as a marketing tool
Using your Shopify theme's password page as a marketing tool

by Michael P. Hill November 30, 2016 0 Comments

Building and setting up your Shopify theme and store can often be a long, strategic process, but there are some ways you can put your Shopify theme to work before you even launch by using the built in password page feature that comes with the Shopify platform.
Read More
One page wonders: Building smaller stores with full featured Shopify themes
One page wonders: Building smaller stores with full featured Shopify themes

by Michael P. Hill November 25, 2016 0 Comments

While most Shopify stores offer a wide selection of products, sometimes your store might only offer a handful of items — or even just one — and the most flexible Shopify themes on the market include the features needed to “shrink down” to a store that has a smaller inventory count.
Read More
How to use your Shopify theme to showcase products on the homepage
How to use your Shopify theme to showcase products on the homepage

by Michael P. Hill November 16, 2016 0 Comments

Your Shopify theme’s homepage is a great place to showcase your best selling products, new items and other products you’re promoting — and the latest premium Shopify theme from Out of the Sandbox is packed with ways to present collections and products in new and exciting ways.
Read More
Stay on top of OOTS news!

Subscribe to our mailing list to be notified of theme updates, new releases and more.