Knockaround

Knockaround is the original, affordable sunglasses company. Founded in 2005, Knockaround offers a variety of frame styles that are both practical and stylish. Our motto is simple; “Quality Shades That Won’t Break the Bank”.

knockaround website layered desktop and mobile

I’ve been at Knockaround for six years, so if I were to lay out every major project win we’ve had in that time this might end up being the longest page on the internet. Instead, I’d like to post a few major challenges in those six years and how we tackled them.

Magento to Shopify Migration

In the summer of 2016 we decided that Magento was no longer an option as a platform for our business. Increasing licensing and server/hosting costs coupled with an incredibly messy dysfunctional codebase being the main factors. After a few weeks of research and planning, we landed on Shopify Plus – a no brainer.

Magento Costs: $3,500k/mo license, $2k/mo hosting and server fees
Shopify Plus costs: $2k/mo

Moving thousands of customer, order, and product records isn’t easy. We were very fortunate that Shopify had partnered with nChannel to handle Magento —> Shopify data transfer for us. Our products, order history, customer database, and sales reports were all seamlessly moved from one platform to the other. The process went smoothly, and we had our data successfully transferred in a few weeks time.

magento vs shopify design

Challenge

Solution

Customers need to create new accounts to access historical data

Send a mass “reactivate account” email as part of a “Knockaround 2.0” campaign to all customers that simply used Shopify’s built in ‘forgot password’ functionality.

Move our Custom Sunglasses Shop, which was custom built on Mangento, to Shopify

Shopify’s app ecosystem, compared to what it is today, was very immature when we moved to Shopify. Since there wasn’t an out-of-the-box solution for custom product builders on Shopify, we patterned with Bounteous Canada to develop a custom solution for Shopify.

Produce a frontend experience on a new platform that wasn’t jarring to existing loyal customers

Creating a custom template that provided a similar look and feel the customers were used to, but optimizing for speed and conversion. Introducing a slide-out cart, thinking mobile first, and making data driven decisions based on Hotjar findings.

Challenges and Solutions

Customers need to create new accounts to access historical data

Send a mass “reactivate account” email as part of a “Knockaround 2.0” campaign to all customers that simply used Shopify’s built in ‘forgot password’ functionality.

Move our Custom Sunglasses Shop, which was custom built on Mangento, to Shopify

Shopify’s app ecosystem, compared to what it is today, was very immature when we moved to Shopify. Since there wasn’t an out-of-the-box solution for custom product builders on Shopify, we patterned with Bounteous Canada to develop a custom solution for Shopify.

Produce a frontend experience on a new platform that wasn’t jarring to existing loyal customers

Creating a custom template that provided a similar look and feel the customers were used to, but optimizing for speed and conversion. Introducing a slide-out cart, thinking mobile first, and making data driven decisions based on Hotjar findings.

 

frame sunglasses piece
left arm sunglasses piece
right arm sunglasses piece
sunglassses lens piece
sunglasses hardware piece
frame sunglasses piece
let arm sunglasses piece
right arm sunglasses piece
lens sunglasses piece
hardware sunglasses piece

Custom Sunglasses Shop

At Knockaround we all feel the thing that differentiates us from other sunglasses brands is our Custom Shop. From only $30 you can create your own unique pair of shades, with over 1 million possible combinations. When we moved to Shopify in 2017 we built a custom solution for our Custom Shop as the app store didn’t offer what we needed.

Three years later it became apparent it was time for an upgrade. Requirements: Built in Vue or React, used Storefront API, and had rock-solid support. A few weeks later we found our match, Assembly, built by the team at Rehash (now part of Pixel Union).

knockaround custom sunglasses design

Our timeline was extremely tight, almost unfeasible, at a mere 1.5 months so we could launch before BF/CM. The team at Rehash knocked it well out of the park. Our Custom Shop is faster, easier to manage, and provides a better experience than ever before. If your brand is looking for a custom product solution and you’re a Shopify Plus customer, I can’t recommend Assembly enough.

Our custom shop currently has over 1,000,000 possible combinations! Not only is it a joy to play around with, it’s also a fantastic product for customers who wan’t their own unique pair of sunglasses. Check it out here.

Redesign Implementations

Over the years we’ve consistently iterated on creating an experience for customers through design that matches the underlying feeling of Knockaround. Bright, colorful, fun, outgoing.

Originally, our philosophy was let the sunglasses be the drops of color on the page. The introduction of color into other parts of our design has created a much more pleasant experience.

old vs new designs layered mobile

During each redesign I build these templates out keeping in mind marketing will be adjusting and rotating content during design refreshes and product launches. Thanks to Shopify sections, I’m able to create completely customizable blocks of content that the marketing team can update themselves with no deployments needed.

Where sections aren’t the most optimal solution, Shopify’s metafields are a great solution for creating logic that your internal teams can utilize to easily customize templates.

Example: Our special release product use a custom template that is much more customized than the regular product page. Custom heads, texts, body images, etc. In order for this content to be unique per-page, I use Accentuate Custom Fields to create blocks that are tied to the product that is being edited. Specifically, this section is a graphic design with the release pair and a paragraph blurb describing the release.

First, I created the metafields in the app and set up the appropriate type.

accentuate custom fields app

Then in the template you can reference the metafield’s unique ID to grab the generated variable that will display the content on the page:

code reference to accentuate custom fields

After styling those elements you’ll be able to upload content that will be unique to that specific product, and won’t need to create a new section file to accomplish this.

knockaround shark week accentuate custom fields example

Working for Knockaround has been a dream. I look forward to future projects and growth with the company that I'm lucky enough to be a part of.