Shopify is one of the most popular eCommerce platforms on the internet for a reason—it has powerful and simple built-in customization that even somebody without a single day’s code experience can understand. It’s also a bit of a walled garden, and this can be a problem if you want to do something truly spectacular—an ambitious business owner will find themselves running up against its restrictions, and wondering whether it might be time to go beyond the simple tools.
That’s what we’re here for: we’ve got six simple steps to help turn you from a casual Shopify store owner into a pro.
1) Be Sure You Need It Customized
Shopify’s WYSIWYG editor is extremely powerful and gives you a lot of ability to play around with your site without having to go under the hood. There’s a lot that can go wrong if you don’t know what you’re doing; if you’re not confident with HTML, CSS and Liquid, stick to WYSIWYG.
2) Look to plugins
Shopify has a ton of great plugins that you can set up without digging into the code. If it feels like a lot of this guide to customizing your Shopify theme is “don’t customize your Shopify theme” then, well … yeah. It is. Because it’s risky to customize your theme, and you have a lot of safe and stable options at your disposal. Are you sure you want to do your own thing? Alright then, let’s move onto step 3.
3) First, Change Your CSS
It’s not viable for all customizations, but if it is (read: you’re changing appearance without changing functionality) then CSS should absolutely be your first port of call. CSS changes are the simplest and most stable, and can have a powerful effect on your UX. This is where a lot of customization stops, and that’s perfectly respectable—you’ve created a unique visual design that is attractive and stands out from the competition.
4) Keep Track of Changes
Is your theme based on somebody else’s theme? Well, if they update there’s a high chance that your changes are going to be overridden. If you haven’t kept track of what you’ve been doing, then it’s going to be a right pain to get everything back on track. Having a document of changes that lets you easily grab and reinsert your custom code will save you a lot of headaches.
5) Understand Liquid
There’s a lot of contradictory stuff online about what Liquid is. It’s either an engine or a language, it’s either built in Ruby or a Ruby framework. It’s the vague hand-waveystuff behind the scenes that makes Shopify run smoothly. It’s fragments of a wizard’s dream.
Okay okay, I’m having a bit of fun with you: it’s a stateless templating language that handles the connection between your HTML/CSS and the Shopify data store. It looks and runs a lot like Smarty PHP and that’s by design; Smarty is explicitly cited in the Liquid docs as inspiration.
We’ve previously been talking about markup, but Liquid is Shopify’s programming language. .liquid files can contain HTML, and usually do. It uses {{ }} for output and % % for logic, so you can write things like:
Which would put the product the user is currently viewing as output. Or:
Which will output all images for a particular product. If you want a detailed breakdown of how this works, check out the official Shopify blog. If all that seems intimidating, let’s take things back down a step:
6) Don’t Skimp on Developers
If you want that sort of customization but you’re worried about the code, you need to bring in the pros. There are a whole lot of people online saying they’ll customize your Shopify theme for $5–10, or some other ridiculously low price. Avoid them at all costs. You’re going to get subpar work if you get any work at all, and subpar work can break your site. I’m not saying you should go for the most expensive option available, but if it seems too good to be true, it probably is. You really want to hire a professional Shopify developer who might cost a little more but is going to give you incredible designs.
And that’s it for now. To summarize:
- Shopify has a lot of easy and free tools for basic customization
- Working outside those tools is risky and can damage your storefront if you don’t know what you’re doing
- Learn HTML/CSS for a little bit more power.
- Learn Liquid for a lot more power.
- If you don’t have the time for #3 or #4, call in the professionals.
Good luck, and happy customization!
