Shopify is awesome and really great for clients. Our client was very happy with how straightforward everything was in comparison to his Magento store.
We've written up our experiences of the project in another post. This post is about the trials and tribulations of our first big Shopify build.
Do do this
When you undertake a project using an unfamiliar technology, You have to quickly make some judgments about what best practices are actually best, what blog posts are reliable and how you’re going to set up your development stall (as it were)
These are some things we did that I would recommend you do if you’re taking your first steps with the platform:
Watch this free video course. The instructor, Gavin clearly knows his stuff and gives a good overview of how to set up a basic Shopify theme
Read the Timber theme source code then
stealborrow all the useful functionality. This was invaluable to understanding how everything fits together and getting ideas about best practices. Ultimately, I didn’t want to learn Shopify’s opinionated framework JS and CSS, but I learned a lot. Which leads on to...Spend some time to create a boilerplate and build-system. I forked mine from the Disco Labs boilerplate and combined with our usual set up and frameworks. This took a few days but was well worth it. It helped me understand how theme development is supposed to work and I was more productive using our own framework code
Implement a no-js interface first. This is quite easy to achieve using just liquid (Shopify’s templating language). You can then enhance the UX/design using JS
E-Commerce is complex and hard and stuff. There are a lot of things to consider. Spend some time coming up with real user journeys and contexts. Analyse analytics. Prototype. Iterate. Be prepared to challenge your assumptions and
change what you’ve built based on data*- Prepare to follow up the build and tweak iterate and improve after shipping. Get analytics in place to measure conversions*
* the last 2 points are good practice for any website, but e-commerce is all about conversions so it's doubly important
I recommend you do this
Some things, we found out the hard way so you don’t have to
While your reading and understanding the Timber framework, test out a few themes and poke around a bit to see how they do things. This will help you get some ideas on how to achieve the things Timber doesn’t do
Keep updating the settings config as you go. It is hard to do it all at the end
Shopify has a new theme development utility - Slate. I wish I had set up our boilerplate using this but it was too tricky to pull it all apart during the build. I’m sure we will eventually upgrade to using Slate. The current theme gem is pretty barebones but you get used to it.
Get used to this
Whilst I generally enjoyed Shopify and found the development experience to be ok, there are a few things that might make you want to fix a drink...
- Plugins are cool, except when they aren’t. None of them will work exactly how you want them to, so prepare to compromiseFiltering is hard, you will need to bring your own, or settle on a plugin (see above)
- Search kinda sucks. The only filtering options I can see here are JS ones or using plugins (see above)
- You can’t (or I couldn’t) separate the login/forgotten password forms. I wasted a few hours chasing this wild goose. Just use the JS solution in the Timber theme
- Javascript is gonna be all up in your HTML. Like the bad old days. Deal with it.
- Unless your client is going with Shopify Plus, you won’t have any control over the checkout. I’m confident Shopify have user tested their standard checkout pretty well. After all, your sales are their sales. I am aware that payment gateways are horrendous and I’m glad I didn’t have to build one, however, redirecting customers to a checkout page lacks continuity*
- Liquid feels hacky. Because it is. That’s also ok.
- You need to do everything with tags, loops and string filters. This will feel hacky. Because it is. That’s ok.
* Shopify will soon allow all stores to use their custom domain for the checkout - huzzah!
I wish Shopify did this
Shopify may already have some solutions for my quibbles in their Canadian mountain lair. In case they are looking for some ideas, I wish I could have:
- Supported filtering. Having a first-class filtering solution, out of the box, configurable via the admin area would make me sleep better at nightSearch results that behaved like a collection when limited to products. With the same methods and properties
- Collections with more properties - tagging, more images, associated content, related collections. This would eliminate some of the more suspect things I was forced to create using liquid loops
- A better doc reference (especially for the JS libs). The docs are quite good when you can find the page you want. There is a problem with all the out-of-date cruft in Google. By the way...
- All the out of date forum posts removed from Google. I will probably stop moaning about finding the right docs then
- Some means of removing the logic from my templates. A long shot this one. You can get a lot done in liquid but it isn’t often pretty. Having so much logic in essentially the View component feels pretty dirty
- The power to create my own object literals in liquid. Or associated arrays that aren’t just 2 arrays of the same length where I need to match indexes
- I missed Browsersync a lot while developing. It would be awesome if Shopify found a way to work locally or avoid having to manually refresh the browser until your changes were pushed to the server. Even a browser plugin that would reload assets when the server notified it. Web sockets or something?
Introducing Toward's Shopify Boilerplate
To make things easier for us, we built a boilerplate. We thought this might help out some other folks, even if it was just to take a look at how someone else does things. That's why we’ve put all of the code up on Github. Feel free to explore, clone, fork, steal our ideas and rejoice/recoil at our code. Make sure you read the License and the Toward Disclaimer. Let us know what you think. I feel now we have our boilerplate all set up and ready to go, our next project will be even smoother.
What are your experiences with Shopify? We’d love to hear about it. Maybe you’re looking to start your own store and want a team who can help you design and build something special.
