Phew, I’ve just finished a two month long project with Lauren Frew, the person in charge of creating and managing Rod Stewart’s whisky brand, Wolfie’s Whisky (A RASCAL OF A THING!). It’s been long and intense, but fun and challenging.
In July 2023 I received a message from a stranger saying “Hello! My friend, Arian Kalantari passed me your number as I’m looking for some help to move a woocommerce site onto Shopify. Is this something you could help with?”
I thought… Who is Arian Kalantari? After some Google Search I realised it was the founder of LADbible… nice, happy to be referred by the founder of one of the biggest social media agency in the world.
And that’s where it all started.
Rebuilding an existing website from WordPress / WooCommerce
Already on the first call with Lauren we got along. I told her I had worked with WooCommerce and that it felt like a Frankenstein monster, where everything is patched with plugins, you have no idea how it works, where the code is, etc. She completely agreed, and we decided it was best to move to Shopify.
She had wanted to only create the product page for the US, and then later redo the entire website, but it didn’t make sense, so we decided to redo the entire website straight away.
Actually, let’s redesign it completely
After a few weeks of working on it, she decided, rightly so, that the website should be redesigned. The previous design looked pretty bland, with standard fonts, boring backgrounds and copy. She wanted the new website to be grungy, to represent the mischievousness of Rod Stewart’s old rock ‘n’ roll days, when you destroyed hotel bedrooms (Rod’s words).
She went back to Shaka where they rethought the brand content: it was going to be based on an rock artist’s rider, using paper textures, ripped edges, highlighter and typewriter style.
Creating sections and plugins for Shopify
Shopify comes with sections ready to be customised straight away, but there are only a few of them, so I had to create most of the ones needed. (Some plugins were available, but they don’t always allow the flexibility that was needed.)
Age check
First of all, Wolfie’s Whisky is, well, a whisky brand, so we needed to add an age gate to make sure the users visiting are over 18. We also took advantage of it to verify where the user is in the world, to make sure we send them to the right store.
Section with ripped texture
The designs that Shaka provided included some textured background (rather than plain colour) which meant I had to use an image as the background. I had initially used giant PNGs (1920px by 1080px) exported in PNG-24, but they all weighed over 1MB which severely slowed down the load time of the page. I then tried to export them in PNG-8. The weight of the images was better, but for some reason I got these weird white edges, which didn’t look good. And, if even I had managed to export them in the right format with the right size, etc. there still remained a problem: the background had to expand if the screen got wider. The wider the screen the less resolution you got, but also the sections wouldn’t align anymore.
After some research I opted to use webkit-mask in CSS. It solved multiple problems:
- I could upload a JPG image, and then create the rips at the top and bottom of the image through a mask instead.
- It also allowed for the rips to be at a constant height independently of the width of the page, meaning as the website becomes wider, the background image could scale up but the rips stayed the same, not covering the sections above.
Find Us page
Built a custom section that automatically displays the online and offline stores depending on the user’s location.
The dropdown list allows to choose a different country and displays the stores there.
The client can easily and quickly add countries and stores through Shopify customiser, meaning there is no need to touch the source code whatsoever.
Custom footer
Custom footer from scratch, I like the grungy look.
Sexy emails
I also design them their email templates so it copies the sites design and stays consistent.
Omnichannel marketing
Time to jump into omnichannel marketing, Google Analytics, heatmaps and the world of data. More to learn! ????