Case Studies

MOSCOT
Eyewear

Senior frontend development for MOSCOT's WordPress to Shopify replatform, producing Liquid, Sass, and Node.js templates for its eyewear ecommerce website.

Screenshot of the MOSCOT Eyewear website; part of John Kavanagh's selected project work.

In Brief

MOSCOT is one of NYC's oldest businesses, dating back to 1915, when its founder sold eyeglasses from a pushcart on the Lower East Side. In 2018, the brand moved away from an ageing, unreliable WordPress ecommerce website to a new Shopify platform as part of a wider overhaul of its online identity.

My Role

Acting as a senior frontend developer, I worked closely with the design team and Shopify Plus to build a library of Liquid and Sass components, page templates, and ecommerce interfaces. These were used during the replatform from WordPress to Shopify, covering key customer journeys across the homepage, product listing pages, product detail pages, and composable content pages.

Technologies

moscot.com
  1. HTML5 & Sass
  2. Liquid
  3. Shopify
  4. Node.js
A Photograph of Mr Hyman Moscot in front of the first MOSCOT shop on 94 Rivington Street, New York, circa 1934.

In Detail

New vs. Old

MOSCOT's previous website was based on WordPress and had been shaped over time through a mixture of external development, internal experimentation, and incremental changes. Although it had served the business for many years, it had become slow, unreliable, and difficult to evolve.

A mild brand refresh and growing interest in MOSCOT's products led to a new Shopify website with a more modern, interactive front end. Visually and technically, the difference between the old and new experiences was stark.

A screenshot of the older, pre-2018 MOSCOT homepage to demonstrate the significant difference in look and feel between old and new.A screenshot of the new MOSCOT homepage at desktop screen size showing a number of different sunglasses and eyewear options.

Subtle Interactions and Bold Photography

Working within Shopify's Liquid frontend framework, the new interface combined subtle interaction and event animations with large, colourful, heavily optimised imagery.

The aim was to give the site a more refined, editorial feel while supporting MOSCOT's highquality product photography and premium eyewear positioning.

A screenshot of the new MOSCOT homepage at desktop screen size showing a number of different sunglasses and eyewear options.A screenshot of the MOSCOT homepage at mobile screen size demonstrating how the hero image has changed to a more suitable image of a pair of sunglasses and a pair of normal glasses, with other product options below.

Product Listing Pages

Product listing pages used a simple grid to showcase eyewear imagery, with custom filters and ordering controls allowing visitors to refine their selection of eyeglasses or sunglasses. Optional ingrid components also allowed MOSCOT to include interstitial promotions and crosspromote related products.

A screenshot of the MOSCOT Product Listing Page (at desktop screen size) showing a grid of products alongside filtering options.
A screenshot of the MOSCOT website PLP at tablet screen size, showing a grid of products (sunglasses) with the filters hidden away behind buttons for easy access.A screenshot of how the MOSCOT website PLP looks at mobile screen sizes: showing the first two products with colour options and sticky filter/sort buttons.

Product Details Pages

Product detail pages carried the highest conversion responsibility in the ecommerce journey. For MOSCOT, that meant balancing large product photography with colour options, sizing, product information, and clear purchasing actions.

The template followed a familiar ecommerce pattern seen across many of my previous projects, while adapting the layout and imagery around MOSCOT's premium eyewear presentation.

A screenshot of the MOSCOT website Product Details page at desktop screen size. Showing their famous Lemtosh sunglasses: a product carousel, colour options, sizes, and product details along with purchasing options.A screenshot of the MOSCOT website PDP (their Lemtosh sunglasses) at mobile screen size. Shows a product imagery carousel, product details and size/colour options.

Composable Pages

For other areas of the site, a component library allowed the team to construct pages in different orders and layouts. More involved editorial and brand pages used bespoke components and templates to support richer storytelling around MOSCOT's history and product world.

The MOSCOT website Our Story page at desktop screen size, demonstrating some of the more bespoke aspects of the website content.A screenshot of the MOSCOT website at tablet screen size showing the bespoke content page: 'Our Story'.

Relevant Services

  • Headless Architecture Consulting

    Headless CMS architecture advice for decisions around preview trust, SEO controls, revalidation, and editorial workflow before they become operational pain.

Facing a complex
web platform problem?

Send me the context, constraints, and current blockers. I'll help you identify the practical route forward.