How to approach design for Shopify stores

There are so many design processes and here are some that I've personally gone through during my days in startups and companies. Design processes and practices like Design Sprint, Human-Centered Design (HCD) or Holistic Design are all useful, especially to designers who work in Shopify, but not necessarily for those who work on Shopify stores. These designers are constraints by what have been decided for them and it's not a bad thing.

What's being passed on to merchants and Shopify store designers are best practices and well-tested User Experience (UX) design.

The way I see it, Shopify store designers or merchants just need to maintain those qualities, so the design of the store works towards their advantage, instead of muddy them with distracting or messy design.

So for the most parts, how do we then approach design for these Shopify stores?

Start with high-fidelity wireframes

It's tempting and obvious to see Shopify stores and install a theme, and winging it from there. Don't get me wrong, it's totally fine. Especially if you're just testing your niche and trying to find your market fit. It's your MVP. I totally get that.

However, if you're a brand and especially the ones that has offline presence, having a consistent experience and design for your online store is really important. Deciding between having a sidebar to accommodate filter menus or not, should be decided at wireframe level. I would go to the extent of testing these; find out if these work better with your existing customers, before making any cosmetic design changes.

I wrote about how you can use these tools to make them as well.

Experiment few versions in mockups

If you're a sole designer or maybe both the owner & the designer of your store, then feel free to skip this. My recommendation is to still do this out of habit because this is crucial if you're going to work in a team (which in any base cases if your store are progressing well, you'll need a team behind it anyways).

Also mockups are useful to approach different ideas from a solid foundation (that you built with wireframe). It will also save you a lot of time jumping back and forth later on when you have to customize the theme in code.

Make sure it's customizable on theme-level

It takes more to achieve this rather than just hardcoded modules on the theme, but if it saves your time as designer to keep changing the same things over and over, why not make it right the first time. It might take longer, but once it's done you don't have to do tedious and repetitive content changes over and over again.

There are more details in each of the point I mentioned above for sure, but in general this should give you a good start.