September 17th, 2021
This post covers:
- Recommended Shopify themes
- Places to find themes and experienced Shopify web developers
- How to test the performance of themes
We get a fair amount of questions asking what themes to use, so here we go…
I’d say most modern themes are at least pretty good for performance optimization.
The main speed issues we see come from:
- Unoptimized images
- Old app code (or too many front loading apps)
- Missing lazy loading or not lazy loading videos
- Too much content above the fold (like a slider plugin with a few huge images rotating)
Tip for new sites: Your theme is probably good to go fresh out of the box, so just make sure you have a good image optimization app like Crush Pics, and that you have lazy loading installed (you can check that with our Shopify Analyzer).
A theme is basically your website’s layout and design. It displays your store’s data (products, collections, content) to people visiting your site.
Your theme is a key player in your page speed, conversion rate, and user experience. Based on these metrics, choosing a quality theme can be a major x-factor in the ROI of your store.
Professional themes typically have more options, convert better, offer better support, and have quality code… For obvious reasons – when creating a paid theme you can invest in more developers, designers, testing and feedback to produce your best theme possible.
I’ve worked on a lot of Shopify themes, seen the good and bad, and over time realized I keep coming back to Out of Sandbox as my theme team of choice.
The first theme of theirs I built a site with was Parallax… then I made a couple sites with Retina… then I built one with Turbo… and now Turbo is my favorite Shopify theme and go-to recommendation for theme upgrades and new projects.
This has been my favorite Shopify theme for at least a year.
It’s built with performance in mind and has a fluid, beautiful design right out of the box.
With Turbo you get a lot of options and features too so you can mold your site to your vision, and dial in the speed how you want it.
I like options, especially when dealing with a preset theme, because more options means more variance in making your site unique compared to other stores using the same theme.
They also have some advanced techniques like:
- Preloading pages – when you hover a link (indicating you’ll visit the next page), Turbo starts loading the next page in the background… ya so when you click the next page is already loading so shows up faster. Cool eh!
- Responsive image loading using “srcset”. This serves up the correct sized image depending on the device the user accesses the site (to illustrate, you don’t want to load huge desktop images on mobile, so Turbo automatically downsizes these on at the server level)
Pro Tip: By default, Turbo utilizes LQIP (low quality image placeholders). This is the blurred image loading effect you’ll see. To enable “true lazy loading”, just turn off the blurred image loading effect in the Customize Theme section.
Update: Out of the Sandbox released their newest theme Flex. This theme has modern features + a ton of template options, worth checking out. I reviewed it here: New Shopify Theme: Flex.
I usually prefer using a Professional theme, but if you’re set on a free theme check out these fast, minimal free themes from the Shopify theme store:
- Narrative – fastest theme I’ve tested, good for small product catalogues.
- Simple – clean and… well, simple
- Pop – super lightweight and minimal, with an alternative navigation style
If your goal is a speedy quick free theme, either of those should serve you well.
Most businesses I see keep the same theme for at least a year or 2, so consider your theme a long term investment.
Where to Find Shopify Themes
Here are some places I look for Shopify themes when starting a new project:
- Shopify Theme Store – You can find a good amount of themes here, but it’s not updated very often
- Theme Forest – I use Theme Forest as my go-to for non-Shopify themes (example this is where I bought the theme for Speed Boostr), but they also have hundreds of Shopify themes. Quality varies, so check the reviews before purchasing.
- Directly from the developer’s site – For example Out of Sandbox that I mentioned earlier.
Testing Theme Speed
You can test the speed of a stock demo theme by using 2 testing tools:
- Shopify Analyzer to get some stats, a grade score, and recommendations
- WebPageTest.org to get more detailed stats related to speed.
These 2 tools measure completeness at different points, so the requests and page weight might vary.
Keep in mind these demo stores are minimal and don’t have 3rd party apps, so on a live store they won’t be as fast, but it’s good benchmark to compare themes.
Also, if you see Lazy Loading warning in the Shopify Analyzer, check the size of the images listed there… some themes load a small image placeholder so the user gets a blurred image first. The logic is that showing a quick blurred image gives the perception that the page is loading faster, rather than having a blank and waiting for the full image to load.
My preference is “true lazy loading”, where no images are loaded until they’re in the viewport of the user. I know some themes have a setting to change from “placeholder lazy loading” to “true lazy loading”, so that’s cool to give you the option.
Customizing Your Shopify Theme
Buying a preset theme is much cheaper than a custom build, but at the cost of having a similar website as other stores.
With some customizations you can make your website unique regardless of theme:
- Just your logo + color scheme + products makes a big difference. I like going with a 3 color scheme: Primary color + Secondary color + occasional contrast color
- Create a custom icon pack
- Create custom graphics (like free shipping, guarantees, etc)
- Showcase some cool lifestyle banners / images with people using your product
You can host a design contest for your logo, icon sets, custom graphics, etc if you’re unsure exactly what you want. Here’s how we did this to create the Speed Boostr logo.
You can also hire a designer/developer to customize your theme, add features, and craft your website to meet your brand’s vision.
I like working 1 on 1 with a designer to make icon packs, so when you get new ideas they can quickly add more in the same style.
Hiring experts to build / customize your theme
Our focus is on optimization and apps (check out our public Shopify apps here).
We occasionally build themes and custom apps, but for page design, general theme projects, and website customizations we recommend Storetasker. I’ve personally hired from them plus met their owners, good people. 👍
Storetasker also handles tasks like installing pixels, helping setup Klaviyo emails, and a variety of other random tasks / projects for Shopify.
To get an idea what a full site build project is like, check this post out: Project: Theme Build + Migrating a Site to Shopify + Making it Faster.
If you’d like to explore a new theme / site, let us know, we can either build something if it’s in our wheelhouse, or refer you to someone that can.
Features / Website Edits
We recommend Storetasker now for website edits and theme features, we usually have a lot of projects in our area of focus and no longer have the bandwidth for smaller customization projects.
If you need a new theme, browse Out of Sandbox, Shopify Theme Store, and Theme Forest.
If you want theme modifications, a custom site, or help setting up a new Shopify store contact us and we can either help you out or refer someone that can.
If you want recommendations on apps to level up your Shopify store and get more traffic/conversions with any theme, check out our curated list of Shopify Best Apps.
Have fun with your site build! 🤘
Will try tuning off the blurred image and see what difference that makes. Have just uninstalled an app and having it properly coded which should help too. Might get in touch if I want further tweaks
Sounds good Michelle if you ever need anything you know where to find us 👍
On your page analyse tool it is still suggesting to use lazy-load images, where do I turn this on in turbo theme ? is it under the performance tab ?
thanks for your great content
Hey Luke with Turbo they load a small placeholder image by default, then lazy load the “real” image as the user scrolls. If you look in the images in the lazy loading section of the analysis results you might see a “_100x.jpg” at the end of the file to indicate the 100px placeholder.
The images are small, but we can convert to “true lazy loading” by editing some code to reduce the amount of requests and save some file weight. Give me a shout at email@example.com if you need some help on that… and actually you gave me an idea, maybe I’ll create a post to show how to edit and what files.