JK14 Wines approached us requiring a full revamp of their existing ecommerce website.

Operating with a Shopify template that was well over 5 years old presented a great opportunity for modernising to support new features Shopify had built out in that time. First step was to ensure the theme had support for ‘Sections’ by moving all code from ‘Template’ files into section files, including a full rewrite of the homepage to replace hard-coded sections with dynamic, moveable sections. As part of this process it made sense to also include support for JSON template files and Shopify’s newly released Online Store 2.0 (OS2.0) features, including rearrangeable blocks and ‘sections everywhere’.

Revamping the site included paying special attention to the existing features like the age verification pop-up and product ‘quick view’, and a variety of new features the client had requested. Some of the featured introduced included:

• Custom metafields for products to showcase wine specific technicals like ABV, serving temperatures, tasting notes and more
• A complete rework of the product card element to include region labels, tasting notes, and a custom “View” button that tracks mouse movement on hover
• Custom OS2.0 filtering options on collection pages to be able to filter by price, availability and more
• A revamped blog layout to better showcase articles and recipes
• A custom, fully user customisable stockist page
• Entirely revamped header section with more fluid layout, and modernised icons

The two largest requests that JK14 Wines had with the revamp of their site were to include two custom features:

1. A custom map of Italy that is both visually appealing and fully interactive. For this we built utilised an SVG (scalable vector graphics) map of Italy, that being HTML based allows the client to use the theme’s section setting to input which regions they want to showcase, pick custom colours for active and non-active regions, add a hover state accent colour, and input descriptions for each region. The regions when clicked will show said description and can link to a collection of products from this region.
2. The other request was to have a custom ‘pick a crate’ feature that would allow a customer to select a mixed case of either 6 wines, or 3 liqueurs. This was an exceedingly complex customisation that leaned heavily into both the Product and Cart Ajax APIs to dynamically fetch product information, store it in an array, and then add to cart in the background. We presented this in the form of a grid of cards that can be clicked to add a product, whereupon the card will dynamically update to reflect the chosen product. Once the 6 or 3 products have been added, an “Add to cart” button will be revealed allowing for the chosen ‘case’ to be added to the cart. This also automatically includes an additional surcharge ‘product’ that covers the cost of the actual crate.

Alongside the custom Shopify development, we also supported JK14 in launching the new website, alongside new product lines. The JK14 wine video was a very exciting opportunity for the motion graphics team to stretch their creativity beyond your typical promotional video or social media marketing ad. The brief of this video was to show off the features that the new and improved website had to offer. Using design styles from the website like how to view the wine and the map of Italy for example, the team re-created these in Adobe After Effects to give them motion and expression. Overall it was a very exciting style of video for a unique, tasteful brand.