Revive Logo

Case Study

ROKA

Climbers wearing ROKA sunglasses

Photo Credit: ROKA

We solved Shopify's 100 variant limit using ReactJS and a custom API integration. Our work has helped ROKA increase revenue and offer additional high-end products including: the RISE collection and prescription eyewear. All of this while improving customer satisfaction.

ROKA's journey began in the unlikeliest of places—a humble garage in the vibrant heart of Austin, Texas. On their quest for a better wetsuit, they quickly broke into and saturated the IRONMAN and triathlon market. But the story didn't stop there. ROKA continued to thrive as they seized the world of eyewear. From their manufacturing plant in Austin, Texas, they are making eyeglasses with performance features that world champions rely on that are lightweight, with a no slip fit & advanced lens coatings so that you can wear them anywhere.

They sought us out after seeing our work on another ecommerce website. Our partnership has lasted years. In our journey together, we've collaborated on projects and exciting web experiments, shaping optimal web features for their explosive growth.

It quickly became clear that ROKA wouldn’t be able to scale as fast as they wanted to due to Shopify’s 100 variant limit. Shopify allows up to 100 variants per product in their backend. According to Shopify, “Each product can have up to 3 options. The options can be different from product to product. For example, one product can use size, color, and style, and another product can use weight, finish, and material.” On Shopify’s side, this is primarily to limit the amount of data and data structures that they have to maintain as a service. Each combination of those is considered just one variant.

However, in efficient manufacturing practices not all products are a completely finished product - allowing the manufacturer to cross-use product components to keep costs down. So, ROKA wanted to offer a customizable sunglasses line with reusable components, but hit a roadblock due to this limit.

View Site

Services Provided

  • Site Analysis
  • User Experience Design
  • User Interface Development
  • Web Application Development
  • Backend Data Architecture
  • Custom API Development
  • ADA Compliance
  • Quality Assurance
  • Project management

Technologies

  • ReactJS
  • Amazon Web Services
  • Headless Shopify Ecommerce
  • Prismic CMS
  • Contentful CMS
  • Algolia Search
  • Optimizely
  • Gladly

“Customization lets users make their own selections about what they want to see, or set preferences for how information is organized or displayed. It can enhance user experience because it allows users to control their interaction.”

NN Group

Mountain bikers wearing ROKA sunglasses

Photo Credit: ROKA

ReactJS & API Development

We designed and developed this ReactJS web application to allow users to design their own sunglasses. This custom integration is unique in the Shopify ecommerce space. We built it so that ROKA can expand it as much as they need using Amazon Web Services and an API.

We made the app integration seamless so it fits right in their Shopify site. We’ve also created stand alone product customizers, such as Maven’s customizable builder application.

ROKA Custom Sunglasses

It’s been a pleasure working with Revive. They are so knowledgeable in any and everything you need to know about keeping your website updated with the latest technology and providing the best user experience. Anything you can imagine your site doing, they can make it happen!

Susie S., ROKA, Project Manager

Athlete wearing ROKA sunglasses

Results

40% faster collection page load time

95 Google Page Speed score on Europe and United Kingdom stores

Passes ADA Compliance