Misadventure Vodka

Ecommerce
Flexbox
Interactions & Animations
Javascript
Task

Build a site for a new local vodka company with ecommerce

Solution

Used flexbox to create a unique fun layout and also integrated Shopify.

The story behind the design

When my wife first started wireframing this website, I challenged her to make the wireframes different from other sites. When she gave me the final design, the challenge fell onto me to execute the design in Webflow. At this time, CSS flexbox just came out and I wasn't yet well versed in it. This project became the first project I've ever used CSS flexbox on. What I learned, at the time, after building this site was that CSS flexbox wasn't fully supported yet on mobile Safari. This became a tough issue for me to work through.

But in the end, I worked through it by using good 'ol floats.

As for custom code, I had to create an age gate on the homepage. I found a simple cookie javascript plugin and integrated that into Webflow so that, if people chose the "remember my age" checkbox, they wouldn't see the age gate the next time they came to the site.

Months later, after the initial launch, the client decided to make shirts and sell them on Shopify. Now, adding Shopify buttons in easy. Just copy a code snippet, paste it into Webflow and done. However, the client also wanted a project detail page. At this time, the Webflow Ecommerce beta feature was many months away from being released. Because of this, I decided to just use the code snippet that Shopify provides. The good thing about this approach was that it was easy to integrate. The bad thing was it took a good 2 to 3 seconds for the widget to load.

This was a bad UX that I had to workaround. My solution was to create a fake preloader with Webflow interations. The preloader isn't really "loading" anything. It's just set to a 3 second timer before it fades out. ;)