Shopify OS 2.0 · Liquid · Tailwind · Web Components · React · GraphQL · Metaobjects

L.A. Colors Theme & B2B Portal

40+-section Shopify design system plus a gated distributor portal

40+

modular theme sections

120+

distributor accounts served

60%

code duplication cut

Problem

The storefront ran on an 80-template legacy codebase full of copy-pasted variants — every change had to be made in multiple places, deploys were slow, and accessibility was inconsistent. Meanwhile B2B distributors had no self-service channel at all: wholesale browsing and quote requests ran through email.

Approach

Designed a Shopify OS 2.0 section library — 40+ modular Liquid/Tailwind/Web Component sections — and migrated the 80-template codebase into it.
Applied WCAG 2.1 AA contrast and keyboard-navigation standards across every section, resolving 120+ accessibility violations.
Built the B2B portal behind a Locksmith gate with a reusable React component library, so distributor-only pricing and catalog stay invisible to retail shoppers.
Implemented a GraphQL data-fetching layer over the Storefront API with metaobject-driven product display, infinite-scroll browsing, and a quote-request wishlist.
Stood up a branch-per-environment GitHub-to-Shopify CI/CD pipeline with PR previews and automated linting for both storefronts.

Architecture

+------------------------------+
| Shopify OS 2.0 theme         |
| 40+ Liquid/Tailwind sections |
| + Web Components             |
+---------------+--------------+
                |
                v  (Locksmith gate)
+------------------------------+
| B2B distributor portal       |
| React component library      |
+---------------+--------------+
                v
+------------------------------+
| GraphQL data layer           |
| Storefront API + metaobjects |
| infinite scroll - wishlist   |
+------------------------------+

Results

60% cut in code duplication and 45% faster deploy cycles after migrating 80 templates into the section library.
120+ distributor accounts served by the B2B portal with zero downtime since launch.
120+ accessibility violations resolved to WCAG 2.1 AA, with zero compliance-related escalations since.
Deploys cut from a multi-hour manual process to under 20 minutes via the GitHub-to-Shopify CI/CD pipeline.