Shopify E-Commerce for Disuri Beauty

A full Shopify Online Store 2.0 build for an inclusive US-based cosmetics brand — covering storefront design, product browsing, an AI shade-matching tool, and a cart experience designed to reduce drop-off at every step.

Tech Stack:

Shopify, UI UX Design

Industry:

Beauty & Cosmetics / E-Commerce

Tool:

Figma

Platform:

Shopify Online Store 2.0

Overview

The project required a Shopify build that could handle a growing multi-cate31pxgory catalog, communicate an editorial brand identity, and give shoppers practical tools — specifically around shade selection — that would otherwise push them toward a physical store.

We handled the full scope: Figma UI/UX design, Shopify theme development in Liquid, custom JavaScript components for the cart and account drawers, and integration of the AI shade-matching flow as a mobile web experience accessible via QR code on desktop.


Disuri Beauty

Challenge & Solution

Challenge:

  • Design a Shopify storefront that reflects a premium beauty brand without sacrificing page performance
  • Solve shade uncertainty — the main reason shoppers abandon foundation and concealer purchases online
  • Build a browsable product grid for 73+ SKUs across multiple categories with useful filtering
  • Maintain a consistent, functional experience across desktop and mobile for all interaction layers

Solution:

  • A Shopify OS 2.0 theme with section-based homepage architecture, swappable hero blocks for campaigns
  • A browser-native AI shade finder — camera-based skin analysis with before/after try-on and direct add-to-bag
  • A badge-driven product grid with sidebar filters, implemented through Shopify metafields and product tags
  • Slide-in drawer components for cart, search, and account — built in JavaScript to avoid full-page navigation
  • Cart-level modules for subscription prompts, handpicked recommendations, and a charity donation widget

Results

Section-based layout built for campaign flexibility.

The homepage is structured as a sequence of Shopify sections — hero, product rail, editorial break, product rail, feature block, service section, footer. Each section is independently configurable in the Shopify editor. Hero images swap for seasonal campaigns without touching theme code. Product rails pull from curated collections. The badge system (NEW, LIMITED EDITION, BESTSELLER, VIRAL FAVE) is driven by product tags and rendered via Liquid conditionals.

Tech Stack

Design
Figma UI/UX
Frontend
Shopify Liquid, HTML, CSS (SCSS), JavaScript
Theme Development
Shopify Liquid
E-Commerce Platform
Shopify
Theme architecture
Shopify Online Store 2.0
Store Customization
Shopify Metafields
Integrations
Shopify Apps & APIs
Payments
Shopify Payments / Paypal / Stripe

A mega menu that shows products before the click.

The desktop navigation uses a three-column mega menu: editorial image on the left, category links in the center, and featured products with images and pricing on the right. This is built as a custom Shopify section with metafield-driven featured product slots — so the merchandising team can update it without developer involvement. On mobile, the nav collapses to a hamburger with horizontal pill-tab category shortcuts for fast access to the main collections.

73 SKUs, browsable.

The product listing page uses a 4-column grid with a collapsible filter sidebar (Brand, Product Type, Price). Filtering is handled through Shopify's native URL parameters, keeping the implementation clean and cache-friendly. Badge overlays are rendered from product tags via Liquid — NEW, BESTSELLER, LIMITED EDITION, EXCLUSIVE, and savings percentage badges all pull from tag logic. The "62% SAVINGS" badge uses a circular pill design to stand out visually without changing the card layout.

Tag-Driven Badge System

Product status — new, bestselling, on sale — is communicated through overlaid badges rendered from Shopify product tags. Shoppers orient themselves across 73+ items without reading product names. The sort and filter controls sit above the grid and update results via Shopify's native collection filtering, with no custom back-end required.
Filter SidebarSort DropdownTag-Based BadgesLoad More Pagination

Product Detail

The product detail page is structured to move a shopper from interest to add-to-cart with as little back-and-forth as possible. Benefit icons (Fade-Resistant, Waterproof, Brightening, etc.) are rendered from product metafields. The shade system uses filterable depth-range tabs built in JavaScript, with swatch colors pulled from variant metafields. Collapsible sections for Ingredients, How To, and Shade Finding Tips use native Shopify section schema — editable from the theme customizer.

The Shade Finder — a browser-native AI try-on flow.

Shade uncertainty is a well-documented barrier in online beauty retail. Rather than adding more swatches or shade descriptions, we built a mobile web tool that analyses the shopper's skin tone via the front camera and recommends a matched foundation shade with a real-time before/after preview. On desktop, shoppers access it via a QR code from the Shade Finder landing page. The entire flow runs in the browser — no app download required.

Cart & Checkout

The cart is implemented as a slide-in drawer using JavaScript and the Shopify Ajax Cart API — no page redirect on add-to-cart. The empty cart state surfaces category shortcuts and a promotional offer to keep the shopper browsing. Once items are added, the drawer layers in an account upsell, a recommendations carousel, a charitable donation widget, BNPL messaging, and the checkout CTA — all within a single scrollable panel without feeling overloaded.

Session-Aware Pre-Login State

Before the shopper logs in, the drawer renders their browsing behavior — recently viewed products, items saved from cart, and any favorited products — pulled from session storage and Shopify’s customer data where available. The login prompt sits above this content, not in place of it, so the drawer is useful regardless of login status. Tab navigation at the bottom of the panel is always visible, keeping orientation clear.

Subscriptions & Content

The Subscribe + Save page is a dedicated full-page experience built in Shopify with two distinct content sections: what the subscription includes, and the controls the shopper retains (pause, skip, cancel, change frequency). The Skincare landing page uses the same section architecture as the homepage — editorial image blocks, product grids, and curated content — reusing theme components rather than custom templates. The FAQ page uses an accordion pattern built with native Shopify sections.

What We Achieved Together

Icon

A Figma component library translated into a Shopify theme where photography leads and UI elements stay out of the way. Every section is editor-configurable.

Editorial Design System

Icon

A five-step browser-native AI flow that addresses the specific drop-off point on foundation and concealer SKUs, ending with a shade match and direct cart add.

Shade Finder — Conversion Tool

Icon

A mega menu with metafield-driven featured products, live search with visual results, and a mobile pill-tab system — all built to handle a multi-category catalog cleanly.

Navigation at Scale

Icon

Cart, account, search, and shade editing all operate as overlay components via the Shopify Ajax API — no full-page loads, no broken back-button behavior.

Drawer-Based Cart Architecture

Icon

50 shades filterable by depth and undertone, built into both the PDP and the Shade Finder. The filtering logic works the same whether a shopper uses the tool or the manual grid.

Inclusive by Default

Icon

Shopify OS 2.0 sections and metafields throughout — the merchandising and content team can update products, badges, homepage sections, and featured items without code changes.

Maintainable Theme Architecture

Innovate with us

Our creative solutions have helped clients raise $100+ mln and expand their reach.

pic