The Podcast
Subscribe
Help the Podcast
Transcript
Scott Austin here. And in this week's episode, what I'm going to talk to you about is upgrading your theme. Now when I say upgrading your theme, there's a couple of different things that that could mean. All right. The first one is, let's say you have a theme already and you just want to upgrade it to a new version of that theme. So you might be on version 2.1 and it's a couple of years old. You want to upgrade it to version 4.2. So that's like a theme upgrade. Another way can be you actually already have a Shopify store with a theme, but you want to install a new theme and overwrite the existing theme and upgrade your store to that new theme's design and features. So we're going to call that a theme replacement and we're going to call the first one a theme upgrade.
So let's first talk about theme upgrades. I'm not a fan of team upgrades in general just because the whole process is pretty complex. Well, let's talk about upgrades for a minute. Anyways, the reason you're going to want to upgrade your theme is if there's a new feature in your theme that your old theme, your old version doesn't have that you want to use or another reason might be Shopify features may have changed recently and the theme has been upgraded to support those new Shopify features. So those to me are the only two reasons you'd want to be upgrading your theme for a theme replacement. There may be other reasons that you're going to be doing that. Then the the ones we talked about for the upgrade of new shop apply features. So in a theme replacement, you may just have an old theme or honestly a crappy team that is just getting in the way of your business and you need to update your theme.
So have something that runs more quickly, more smoothly, that gives you more flexibility. It's very common that I'll work with a new client and their theme will just be an old crappy one that they got off of Evanto marketplace or something like that. And the first thing I tell them is the theme is holding their business back. Now, that said, if you have a really good theme already, you shouldn't just be willy nilly about upgrading themes and do it frequently. So there's a bunch of reasons why you should not upgrade your theme or do a theme replacement. The first one is it's just a lot of work. Anybody who tells you that a theme of upgrade is simple process analytics, a couple hours is really not being honest with you. You're going to have to Redo all of your customizations and really implement all of your apps.
You're also gonna have to resize graphics, rework your shopping experience, and do anything else that you're gonna do inside of the redesign. I highly recommend you don't upgrade just because a theme developer offers free upgrades or they sent you an email, sing up the new version of their theme is out. Really do some due diligence and ask yourself, do I need to improve my store's theme? Do I need to upgrade my existing theme or replace my existing theme? And now going to take a little bit of a side note and talk about team replacement apps. There are a few developers out there that have developed apps in the Shopify app store that upgrade their themes. If they're in your store, if you'd installed that theme in your store, there are apps, we'll upgrade the theme from the version that you had originally. Let's say 2.1 they'll help you upgrade to 2.2 I'm not a fan of the current versions of these apps.
They work really well if you haven't customized your theme or haven't installed new new apps and functionality on top of that theme, which most stores have customized their theme and have added Apps to their theme. So the upgrade process done by the app is not as simple as pressing a button and it's done. What it will do most of the time is do the work that it can do the upgrade, and then it'll give you a list of work that you have to do manually walk through the task list to finish the upgrade, and that's just a, a bunch of work, a bunch of manual effort that work just may not be a value to you for the amount of time it takes to do and you can apply that same effort and get better gains in your business doing something different. Now, let's continue talking about our theme upgrade and replacement process.
I see that most stores are gonna stay with the theme that they install or upgrade to or replace. They're going to stay with that theme for at least two years and upwards to four years before they think about doing an upgrade or replacement again. And that's just because you're gonna invest so much time and energy, getting that theme right for your business with customizations and app integrations that you're going to want to stay with that for a while and not go through all that effort to do an upgrade or replacement more frequently than every two to four years. Now, one of the things to think about when doing your theme upgrade is when to do it. And then one of the thing that's going to drive that is theme upgrades take a lot of time, right? They don't just take a couple hours to do, and a lot of times what happens in a theme upgrade is it'll take much longer than you think because let's say you're, you're creating new evergreen pages, a new about us page or about our process page, and you don't have the exact right photography for it yet.
So you're gonna have to have that photography shot for the purpose of inputting into that theme. So things like that are going to slow down your theme upgrade process. You know, in theory you can upgrade your theme in one day in execution. It's actually going to take you weeks and sometimes months to get it done. So when thinking about when to do your upgrade, do it during the downtime of your business. Look at the full calendar year and ask yourself, when is the best time to do a theme upgrade? And that should be the time that your business is the slowest because you can spend the time you need to focus on doing that upgrade doing it right. For a lot of people that's most definitely you wait till the end of holiday in the new year before you do your theme upgrade. If you're a business also has a big holiday season for Valentine's Day, you're gonna want to wait until after that.
A lot of stores think about doing it after dads and grads and before back to school. Did they get it done in the summertime and they get shipped before back to school. And that means your theme has enough time to settle in and you get used to it. Your customers get used to it. You can tweak it out so that it's ready and tested well before the holiday season. I would highly recommend, do not think about doing a theme upgrade during the month of November, right before holiday in your Shopify store. There are things that the theme changes and there's things that the theme doesn't change. For example, things that change within your theme or the layout, the design, you know how pages are laid out, what components are on those pages. That's all part of your theme. Your site's colors are a part of your theme, your site's typography.
What fonts are using are part of your theme. If you're using sections. Some of that content is also part of the theme, but there's also components of your store content, your store that don't change with your theme, and that is things like products, collections, page content, blog content, and navigation. So now I'm going to walk through the general process that I use when doing a theme upgrade or a theme replacement in a store. Now the first thing to note is that Shopify allows you to have more than one theme in your store at a time. Only one theme is live. So when your customers come to the store, they only see the, whatever theme you've put is live, but you can have other themes installed in your store and more than one you can have two, three, four or five different themes in your store. And that allows you to work on themes in an offline mode so that you can be working on the theme, working on your site design and working on your shopping experience and not impacting your customer's shopping spirit.
And that allows you the flexibility and time you need to do it. Right. So your new theme, when you add it to your store, it's going to be offline and you can preview it and send preview links for others to review. One thing to note though, the preview functionality with Shopify can be a bit wonky at times. So if you see that you were previewing the theme and all of a sudden as you refresh the page or click on a link and the old theme or the current life theme is showing you didn't do anything wrong, that just happens in Shopify sometimes. Don't worry about it. Just to go back to the preview link in the Shopify admin that you clicked on to start that preview experience and start over again. That's a normal thing. Also, the preview links that you send out to whoever you're sharing the preview with those links do expire.
So you'll have to resend them every once in a while to people. So they have a fresh link that works. Again, when you get your new theme or your upgraded theme and add it to your store, you have in the offline mode, one of the first things you want to do with it. He's taken inventory of what that theme is going to require. So you're gonna want to look through the theme functionality in the Shopify Admin and go through all the different menus and see what that theme can do. Your old theme may allow five different color inputs throughout your design process, but your new theme may allow for 55 different color inputs. Same thing with typography. You may have just a few font options in your old team, and the font options and your new theme may be much greater. So you're gonna want to look at your theme, your new theme, and see what things you're going to have to pull together, what assets you're going to need, what decisions you're going to have to make that you haven't already made for your store.
So I recommend you come up with a list of those things. Like you may decide that you're going to have a color palette with five colors in it, or you're going to have a font set with these three different fonts. A big part of any site redesign, it's going to be the photography and other graphics that you use in that site. You're gonna want to look at your new theme and see what opportunities you have for visuals in that theme. And what are the sizes that that theme recommends that you use today, you may be using banner ads that are 1200 pixels wide by 400 pixels tall. Maybe your need theme is going to recommend that they'd be 1800 pixels wide by 600 pixels tall. So that's part of that inventory going to be taking is okay, the visual assets, what are the dimensions that are recommended and what visuals do you have already in your inventory that you can use, reuse, or repurpose and make fit inside of the new shopping experience that you're designing.
And as you're doing that inventory of your new theme, you're gonna want to look at what templates are available to you in that theme. Maybe your old theme only has one template available for pages. Your new theme may have five or six different templates that you can pick from depending on what you're going to use that page for. For example, some themes, I have a specific template just for photo galleries or a different template, just four, eight about us page. So look at your new theme and see what templates it has and make decisions on which templates you're going to be using in your story design. And you may find that new templates exist that give you new functionality and because of that new functionality, you're going to be creating new content. For example, maybe you never had a team page before that listed all your team members, but your new theme makes it easy for you to create one of those.
You're going to create a new page about your team, which means you're also going to have to get head shots and come up with the copy that you're going to use on that team page. By the end of this process of evaluating what's available inside of your new theme, you're gonna want make decisions. Are you going to keep different types of content in your site the way they are? Or are you going to redesign them based on functionality available? Now in the new theme, so you're going to ask yourself for all of your pages, are you just going to keep what's there or are you going to be redesigning them? Same thing for your products. Are you just going to display the products the same way you did in the past? Where are you going to redesign them? Also for collections and your navigation elements?
And here's a tip for you. So let's say that your new theme has a new page template for a photo gallery, and that template is called page.gallery. Your old team doesn't have a page.gallery template. So if you try to preview your new theme, the one that's offline, have you tried to preview that and look at your gallery page? You won't see the template being applied to that page because a page has a template applied well only against the life theme. So that template name needs to exist in the live theme. Page. Dot Gallery doesn't exist in the live theme. It only exists in the new offline theme. So one way that you can preview that just to go into your live theme, your old theme, and create a new template called page.gallery. Leave it when the the fault content that it puts there for a page template. But now that you have a template by the name of page.gallery in your old live theme, you can go into your page and the Shopify admin and select the page.gallery template and apply it to that page so that when you go back to preview your new offline theme, which has that page.gallery template, it'll apply that template to the page and now you can preview your new gallery page with the new template because you fake the system out by creating that template name also in the old live theme. Hopefully that makes sense for you.
Now, whenever I'm doing a site redesign because of an upgrade or replacement of a theme, one of the big components of that redesign is redoing the shopping experience because of all the things we've learned in the old theme and the existing business, we were much more educated about how that shopping experience should be improved upon. So a lot of times should be spent improving on that shopping experience with all that new knowledge that we have. If you're redesigning your shopping experience, it probably means that your navigation is going to be substantially different in your new theme and your new design than it is in your current old design. So one of the things that I highly recommend if you don't try to stick with your old navigation menus, great new navigation menus to sit right beside the old ones as you're doing your redesign. So your old theme would be calling up the old Nav Menus and your new theme would be calling up the new NAF menus.
And the same thing is true for collection pages. As you're recreating a new shopping experience as part of your redesign, you're probably to need new collections. So go ahead and make new collections in your Shopify admin that sit right beside your old collections and just use the new ones with your new design. And the old ones were the old design. I've seen store owners that struggle with too much trying to make their old navigation and old collections work and their new design where it's what's more empowering to just, we'll leave those behind and start with with new ones. Now as you're designing your site, one of the things that I highly recommend is to think about mobile first. And what that means is that the mobile experience is the most important experience. It's really easy to make and absolutely beautiful website on a 27 inch monitor, but that same website may not work that well on a six inch phone screen.
So as you're doing your design, make sure that you're designing it on the mobile phone first. You can be doing the work on your desktop, but as you're checking your work and seeing how it's going, make sure you're on the phone first and that it works well on the phone and you're happy. That experience on the phone before looking at it on the desktop. And another thing with your new theme, all new themes in Shopify are highly responsive. They work well on mobile phones and work on desktops. And because Athena's responsive, it adjusts for every different screen size. Not every desktop is the same dimensions. Not every mobile phone is the same dimensions. Responsive themes adjust to all the different variables of screen size that are out there. And sometimes you have to let the theme do something that doesn't look perfect for a given screen size because it looks good for all screen sizes, just not perfect for all screen sizes.
One example I see a lot is people try to optimize the design so that a title on a banner image only takes up a one line, but they're only looking at that on a 27 inch monitor, not realizing that on a 13 inch laptop, which has a smaller pixel size, that it's going to be two lines anyways. So sometimes you have to just accept the imperfections that responsive provides from your desired goal of the design because that makes the design work better for more people, not just perfect for one set of users and doing a redesign is a perfect time to go back and Redo all your psych graphics or that new theme. And by site graphics I mean the photos for the banners and the navigational elements and for your products and collections and also different things you might have like icons and logos.
You should think about starting from the original files that you have for all those assets and then optimizing them for the new theme. Don't go back and take your 1200 pixel wide already saved and compressed jpeg file and scale it up to 1600 pixels and then recompress it and that good stuff because it's just not going to look good. Start with the five megapixel photo that you originally had. Scale that down to the 1600 pixels and save it with compression for the first time so the quality of those graphics are the best possible. What are the most important tasks to be doing during your redesign? As we talk about things like mobile first and responsiveness, it's essential that you always test, test, test, test all the time and what I mean by that is looking at the site, looking at the design in different conditions.
She needed to look at it on different browsers. Do you see what your site looks like on chrome and on safari and on Firefox and on Internet explorer or edge or whatever Microsoft calls it these days. You also need to look at it on different screen sizes. You need to look at it on a 27 inch monitor on a 13 inch monitor, on a six inch phone, on a six inch phone turn sideways. You all seem to look at it on devices, tablets, phones, laptops, desktops. What looks good in one screen may not look good in another screen. So it's important that you test across different screens. What looks good in one browser may not look good in another browser. It's important that you test across all these different browsers. Chrome comes with some good tools to help you testing on different screen sizes in different devices.
On chrome, it's called Dev tools. You do a quick Google search for Google Chrome Dev tools. It'll give you some tutorials on how to do that. Um, and it's really helpful. It's not as good as having 15 mobile phones in front of you, apple, android, that kind of stuff. And testing on those different phones, but that's just not practical for most people. She wants to actually have as many different devices as you can, but when you don't have certain devices, definitely okay to go to chrome Dev tools and use that to test for those different screen sizes. So by this time in our redesign, we implemented our theme with our branding and our shopping experience. So that's the core of implementing that theme. The next step is to do any customization to that theme that you're going to do whatever editing of the liquid code to get the functionality that you need that isn't provided by the theme.
That's what you're going to be doing. Then after that, do you want to start integrating your apps? So you may have an app for reviews, another one for affiliates, another one for email. You're going to want to follow the instructions for integrating those apps into your theme. Not every app needs to be integrated into your theme cause some apps don't work with the theme. An example of that might be an app you use for fulfillment that doesn't have to interact with a theme, but an athletic Klaviyo for email definitely needs deep theme integration and you're gonna have to follow those instructions and something else with apps to definitely take in mind as you're doing your redesigned. If you have apps in your store today that you use with your old theme, but you're not going to use them with your new theme because you don't need the functionality that provides cause maybe the theme has it already built in.
You're going to want to make sure that you delete that app from your store before you push your new theme live. Obviously you can't delete that app a month before you go live because you're using that in your current theme. But one of the last steps you're going to do before you push your theme live is to delete any apps that you're using, your old deem that you don't want to use in your new thing. Because apps can edit themes and you don't want an app coming in editing your theme and adding code that's unnecessary because you don't need that functionality and going live with your new theme. It's actually really easy. In Shopify, the Shopify Admin, you just go to your offline theme and you say publish and it'll push it live. So right before you do that step, just make sure you go into your apps and delete the unwanted ones.
And when you publish your theme, your new theme into the live mode, it'll just show up to all your consumers on the front end. They'll see the new experience that you've redesigned. And what it'll do is it'll take your old theme and make it offline so it doesn't delete it, it doesn't override it. It's still there. And that's really nice safety net for you because if something's wrong and your new theme that you didn't see during your thorough testing that you were doing before, you can just go back now to your old thing that's offline and publish it, push it live, it'll take your new theme that was live and take that into the offline mode where you can then edit it and fix whatever it is that you discovered once you pushed it live and once your new theme is live, your next step then will be to take any changes to the design and it changes you've done for branding and carry those out through the other elements.
Yeah, of your experience with your consumers. That isn't inside of the theme. For example, inside the Shopify Admin, there's a couple branding elements in notifications, but the color and the logo, so if you change any colors or you've changed your logo, you're going to want to go into notifications under settings and update those. Also, you're also going to want to go into your other tools that have pages outside of the Shopify experience, so maybe your reviews has a page for your store on the review site. You're going to make sure that any branding elements that are there match what you've done in your new redesign, all of your outgoing emails, whatever email you're using for your CRM, you want to make sure you update the design of those also if necessary. And also one important part of a redesign that you have to think about before you do the redesign is measuring the results.
Hopefully you're already using Google analytics and have a weekly scorecard going. If not, I highly recommend you have one that shows conversion and other important metrics for your business and you're measuring that before your design goes live through your whole redesign process. So you'll at least have a couple months worth of data. And the reason you want to do that is you want to make sure that your new redesign improves your business metrics. You don't want to go through all this effort and take your conversion rate from 3.0 down to 2.7 you want to take it from 3.0 and bring your conversion rate up to 3.5 as part of the redesign. So measuring that before you go live so you can see the before and after the cause and effect of your redesign.
So that's a lot of my thoughts about a redesign, why you should do them, when you should do them, when you should not do them. And some of the best practices and tips and tricks that I have. I hope this was helpful for you. Thanks for listening.