How to build a lightning fast drop website with Ask Phill

This interview was between me (Tim) and Paul (left) & Martijn (right), the founders of Ask Phill - a super successful Shopify Plus agency in Amsterdam. We had such a great chat, these 2 are very cool cats... Anyways - Here's how they built an insanely fast website for one of the most hyped up drops ever: Nike x Patta.

‍

Let's jump into the project: The Nike x Patta collaboration. What were the main components of the site? 

There are two sides to the website. One part is the “password page” hat’s there to let people know that you can subscribe to upcoming drops. It's really basic. And then the second component is the website where everything is “dropped” happens. That’s a simple custom template as well. Used to highlight the different products that will become available for a drop. It’s an easy setup for the team to switch out products & imagery. 

And when Patta came to us, they said that this was going to be their biggest drop ever and they were expecting multiple 100’s of thousands of visitors coming in at the same time to buy shoes. So we needed something as lightweight as possible with no room for error. So even though we’re very experienced with headless builds - we decided to go with Shopify 2.0.

We started from our own template with is very similar to Dawn - only with less way code and a better developer experience. 

Can you briefly touch upon the main differences between 1.0 & 2.0?

It was an amazing update. We've been a Shopify partner for 4 years and we found 1.0 to be quite limited.. But now 2.0 enables us to create modular websites that our clients can easily interact with - It’s almost easier to use than Contentful. The second best part was the direct connection to Github. And the third improvement was the native filtering. We were mind-blown by the native functionality in 2.0 - we no longer had to use apps for filtering - and now that functionality is achieved with just 60 lines of code. The same applies for Search where we’d usually leverage Algolia - but Shopify 2.0’s search functionality now does the trick. 

With 2.0 being as powerful as it is. Do you see headless solutions becoming redundant?

We do build a lot of headless stores and they can be extremely powerful. But working in Shopify removes the need for a lot of code, for extra dependencies - it’s by far the best experience from a merchant ‘s perspective. Although a headless solution still is technically superior to a native Shopify build.

‍

Great. Let's keep going. What came next? 

As this was a highly anticipated project for Shopify Plus - We got connected directly to the Shopify team in Canada and a consultant from their team gave us a few tricks to help with bot protection. 

Essentially, in a split second, you need to decide whether a visitor is a bot or not. And we implemented a feature to remove bots at the cart stage. And we almost didn’t see any bots and the experience was stable and really smooth. No stress at all. 

Beyond managing the bots, did you do anything else to ensure a smooth checkout? 

The bot protection was huge. But we also implemented a “virtual queue”. Because so many people are buying the shoes at the same time, Shopify implemented a system where a user has to wait 1-30 minutes before buying to limit the load. It's a totally different Shopify experience but one that’s commonly used with drops. 

What’s amazing is that you can see that with relatively small development effort, you can serve a global audience at an enormous  scale. What we’ve learned is that if we had to replicate this experience on headless, it would be a way bigger hassle. So unless you really have certain edge case needs, then you should go for Shopify. We really recommend keeping it simple. 

And it was a huge success for Patta. As a team, we had a lot of fun watching the drops live. Patta set up a virtual war room and we’d watch the Shopify account populate in a Stop-And-Go manner with bulk orders of thousands of orders. We would see all the dots blinking all over the world - it looked like world war III started. For 25 minutes it’s super intense, and then it's done and everything is sold.

One big takeaway from me is your comment about headless. A lot of people would recommend headless for the improvements in speed and stability, but you were able to solve all of that within Shopify 2.0. Would you agree?

Yes - we’ve always been huge advocates of headless but more and more Shopify 2.0 is our go-to-recommendation. And yes technically headless technology is still superior, but the ease of use and comfort you get from Shopify is unmatched. 

I’d say that headless still makes great logical sense for someone planning to sell in 7 or 8 different languages and countries - Shopify doesn't have a proper solution for it. This was never something Shopify paid much attention to as they targeted the US market in 2016, but in Europe for example selling across the continent is common and requires a different tool set. In headless we code with React and use the NEXT.js framework and it’s much easier to create custom multi-store / multi-lingual experiences than within the confines of Liquid. 

Looking forward, hopefully Shopify keeps improving because what they've done this year is outstanding. 

‍

Thanks guys!