Temple Cellars

  • Redesigning an alcohol e-commerce with custom Vue Shopify theme

 

Brief Description

As I was working in Reassemble, we worked in the same office as one of the owners of Temple Cellars. As a way to provide some of our UX services for them, we have been working on their Temple Cellars website.

Main Objectives

Instead of merely doing a UI re-design, we used our expertise -- UX design -- to ensure that the users of Temple Cellars can be better accommodated to. For this project, I wasn't involved in the User Research portion so I will be detailing more from the UI design and front-end development perspectives instead.

Other objectives include:

  • Re-designing the website with a modern look
  • Adding custom interactions such as a sliding cart overlay, product hover actions and integration with other API, namely Untappd.

Stacks

E-commerce Shopify

Integration tools AJAX, Liquid

Javascript Framework Vue.js (1)

Front-end tools Font Awesome, Lodash.js, Shopify Themekit

Languages Liquid Template, Javascript, HTML, Sass modules (1)

UI Prototyping Tools Figma

(1) See my blog on how I use Vue and Sass in Shopify's liquid template


Landing page - Picture tiles Landing page - Picture tiles
Mobile landing page Mobile landing page
Top header mega menu Top header mega menu
Mobile mega menu Mobile mega menu
Beer collection page with sticky filter column Beer collection page with sticky filter column
Mobile collection page with top sticky filter Mobile collection page with top sticky filter
Product page with untappd reviews integration Product page with untappd reviews integration
Mobile product page Mobile product page
Cart drawer accessible from all pages Cart drawer accessible from all pages
Custom cart application - Select new delivery address or pick from account Custom cart application - Select new delivery address or pick from account
Custom cart application - Select delivery date and time Custom cart application - Select delivery date and time
Custom cart application - Review details to checkout Custom cart application - Review details to checkout

Try this site in a new tab

frontend

Other posts

Setting up a Multi-Themed Application Hero Blog
 

Setting up a Multi-Themed Application • 2022

Uses TailwindCSS and Javascript (React) in this example
Spark Commodities Landing Site Hero Showcase
 

Spark Commodities Landing Site • 2021

Fast, responsive and performant SEO site built with NuxtJS using SSR and TailwindCSS
Nuxt with Animated on Scroll Hero Blog
 

Nuxt with Animated on Scroll • 2020

Animated on Scroll (AOS) is a CSS library to animate elements on websites.
Nuxt with Tailwind CSS and UI Kit Hero Blog
 

Nuxt with Tailwind CSS and UI Kit • 2020

Set up Vue Tailwind UI Kit in Nuxt along with Tailwind CSS, PostCSS and PurgeCSS.
Reassemble Hero Showcase
 

Reassemble • 2020

Reassemble is a UX Design Consultancy based in Singapore. I made for them a consumer facing website based on NuxtJS with Tailwind CSS, Animated on Scroll and Contentful integration.
Shopify with VueJS - Sass - Theme Kit Hero Blog
 

Shopify with VueJS - Sass - Theme Kit • 2020

Setup a Shopify custom theme using Vue.js and Sass with more control than Slater.
Slater and Custom Shopify Theme Hero Blog
 

Slater and Custom Shopify Theme • 2020

How I setup Slater, and other tools I considered when researching on the tools to develop a custom Shopify storefront.

Contact