Preservation Beauty Clinic

Overview

Preservation Beauty Clinic is a premium medical aesthetics practice based in Dallas, Texas. Known for treatments like Sculptra, Botox, Sofwave, and VI Peels, the clinic had already established a polished digital presence through their Framer website — elegant, editorial, and intentionally luxurious.

When 6 Degree Media brought me in, the ask was specific: add a full e-commerce layer to the existing site using Frameship and Shopify — complete with product catalog, individual product pages, search, cart, checkout, and customer accounts — all styled to feel native to the existing brand experience.

The challenge wasn't technical complexity alone. It was building something that belonged.

The Brief

The client needed a complete e-commerce experience embedded within their Framer site, bridging Shopify's inventory and payment infrastructure with Framer's visual environment through Frameship. Every new page had to feel like it had always been part of the site.

Filterable, browsable product grid

Rich product detail with variants

Login, order history, profile

Real-time product search

Item management + order summary

Shopify-powered, brand-matched

The Existing Site

Before writing a line of code, I studied the existing Preservation Beauty Clinic site closely. The design language was clear: high-contrast black and white, editorial spacing, serif-meets-sans typography, and imagery that leaned cinematic. The tone was intentionally clinical-meets-luxurious.

Key design tokens I extracted from the existing site informed every new page I built: typeface hierarchy, button styling, whitespace ratios, color usage, and the way imagery was cropped and positioned. These became my constraints — and the foundation for every decision I made.

Process

01

I began with a thorough audit of the existing Framer site, identifying colors, fonts, spacing, button styles, and layout patterns. This established the design system I'd build from rather than against.

02

Set up the Shopify backend — product collections, variant structures, metafields for extended product details, and the Storefront API configuration that Frameship would use to pull data into Framer.

03

Configured Frameship as the bridge between Framer and Shopify — mapping product data, handling cart state, syncing customer authentication, and enabling Shopify checkout to launch from within the Framer environment.

04

Designed and built all six pages natively in Framer — catalog, product detail, cart, search, checkout, and customer account — each adhering strictly to the existing visual language while introducing the necessary e-commerce UX patterns.

05

End-to-end testing across devices — add to cart, checkout flow, account creation, search results, edge cases. Final handoff to 6 Degree Media with documentation on the Shopify + Frameship configuration for ongoing product management.

The Work — Product Catalog

The product catalog page was designed to mirror the editorial grid language of the existing site. Products are displayed in a clean, image-forward layout with minimal text — category filters sit quietly at the top, and the grid adapts fluidly across screen sizes. Hover states reveal pricing and a quick-add interaction without breaking the flow.

The Work — Product Pages

Each individual product page was designed to communicate trust and luxury. Large imagery, clean variant selectors, concise but rich product descriptions, and a persistent add-to-cart interaction. The layout avoids the cluttered, conversion-optimized aesthetic common in typical e-commerce — because that wasn't the brand.

The Work — Search, Cart & Checkout

Search, cart, and checkout are pages where many e-commerce projects cut corners — reverting to default templates or generic styling. For Preservation Beauty, every functional page received the same design attention as the marketing pages.

Search results render in real time via the Shopify Storefront API, styled to match the catalog grid. The cart page gives users a clear summary with easy quantity adjustments. Checkout flows through Shopify's native engine but inherits the brand's color palette and typography.

The Work — Customer Accounts

Customer accounts were built to feel like a private client portal rather than a generic e-commerce dashboard. Users can view order history, track current orders, and manage their account details — all within the existing site's visual environment, seamlessly authenticated via Shopify's customer API.

Outcome

The final delivery was a fully functioning Shopify e-commerce store surfaced entirely within the Framer environment — with no visual break in the brand experience. Every page felt native, every interaction felt intentional, and the backend was set up for the client to manage products and inventory independently through Shopify.

6 New pages delivered

2 Platforms integrated (Framer + Shopify)

0 Visual breaks in brand experience

The client now has the infrastructure to grow their retail operation — selling skincare products, treatment add-ons, and gift cards — all within the luxury digital experience they'd worked hard to establish.

Reflection

Frameship has matured considerably as a Shopify bridge for Framer, but success with it still comes down to upfront planning — particularly around how Shopify's data model maps to Framer's CMS structure, and where Frameship's components need custom overrides to fully match a bespoke design.

The bigger lesson was about restraint. The temptation when adding e-commerce is to default to e-commerce conventions — badges, urgency cues, feature-dense product pages. Preservation Beauty's brand demanded the opposite. Less. Quieter. Letting the product imagery and copy lead.

The result was a project I'm genuinely proud of — one where the technology serves the brand, not the other way around.