Jewels By Grace
Custom storefront features for a one-of-a-kind jewelry brand
- Role
- UI/UX Design & Development
- Timeline
- March 2025 – Present
- Platform
- Shopify
- Tools
- Figma, Shopify, Liquid, JavaScript, Playwright
Jewels By Grace is a Shopify-based jewelry brand specializing in vintage and one-of-a-kind pieces.
I work on the store’s UI/UX design and front-end development on an ongoing basis, translating business goals into custom, production-ready storefront features that Shopify’s stock theme tools don’t support out of the box.
One-of-a-kind pieces, stock tools
Every charm and bracelet in the catalog is one of a kind, each its own product or variant. The standard storefront wasn’t built for that.
No way to picture the finished bracelet
Customers couldn’t see how charms would look together on a bracelet before buying. A static product grid doesn’t convey a build-your-own experience.
No home for editorial content
There was no way to publish blog and editorial content with a template that matched the brand.
Design first, then prove it works
- UX research and Figma prototyping before writing any code
- A custom Liquid section with vanilla JavaScript, refined over multiple rounds of real feedback
- Surveyed the real catalog to derive filtering rules instead of guessing
- Every feature verified with Playwright browser tests (drag, cart payloads, UI states) before shipping
Early drafts of the builder
Mock drafts of the charm bracelet builder, made before the final product: placing charms on the bracelet, and the selections list with a running subtotal.
Drag-and-drop charm bracelet builder
Customers drag charms onto a photo of the bracelet and preview the result in real time, then add the whole design to their cart in one step.
Custom drag engine
A pointer-based drag engine built from scratch, with a tap-to-place fallback.
A filterable “sticker sheet”
Search and filter charms by metal, designer, diamond shape, carat weight, motif (tags auto-derived from product tags) and price range, with sorting and pagination.
Real-time subtotal
The price updates as charms are added to or removed from the bracelet.
One order, one click
The bracelet and every charm on it go into the cart together as a single order via Shopify’s Cart AJAX API.
A blog that matches the brand
A custom blog section gives the brand a home for editorial content: a custom “Bunny Mellon” blog template, dynamic hub pages for each category, and a central blog index page.
The template wasn’t only for new posts: more than 70 of the brand’s existing blog posts were rebuilt on it, so the whole archive now shares one consistent design.
Under the hood
Theme Editor double init
Fixed a Theme Editor double-initialization bug that left an animation stuck.
Dropdown stacking context
Fixed a dropdown stacking-context bug caused by a position: sticky ancestor.
Cleaner dragging
Removed text selection highlighting during drag.
Live on the store
Both features are live on jewelsbygrace.com. Customers can design a bracelet from one-of-a-kind charms and check out in a single order, and the new blog template carries the brand’s editorial archive, including more than 70 existing posts rebuilt on it.