A storybook storefront for a Portland maker of small-batch bath and body goods.
Gnome's Creations makes bath bombs, shower steamers, lip balms, and solid perfumes by hand in Portland, Oregon, in batches small enough that the maker can tell you what went into each one. The products are full of charm, so a store that looked like every other soap shop was never going to be the right home for them. We built a custom storefront on top of the Shopify catalog they already manage, gave it a design system drawn by hand to match the brand, and wrote the content that turns readers into customers.
The live homepage. Every doodle on the page is an SVG we drew for this brand. Click to enlarge.
The Challenge
A handmade brand lives on feel. People buy a $6 bath bomb the same way they buy a card for a friend: because something about it made them smile. Stock ecommerce themes are built to kill exactly that feeling. They hand every shop the same hero, the same grid, the same buttons, and suddenly a maker who hand-letters her labels is selling through a template that could just as easily be moving phone cases.
At the same time, the practical side had to stay simple. The owner runs her whole catalog in Shopify, and that works for her: products, prices, photos, inventory, and orders all live in one place she knows well. Whatever we built could not add a second system for her to maintain.
So the brief was a store with the charm of the products themselves, running on the catalog she already manages, fast on the phones where nearly all of this shopping happens, and ready to earn search traffic as the brand grows.
A custom ecommerce build that leaves Shopify doing what Shopify is good at.
The storefront is hand-built on Astro and pulls the catalog straight from Shopify's Storefront API, so every product, price, and photo on the site comes from the store the owner already runs. She edits a product in Shopify and the site reflects it on the next build. Checkout is Shopify's own, so payments, taxes, and order emails all keep working exactly as she knows them. What her customers see, though, is entirely ours: a custom cart drawer, shelf-style collection pages, product pages with trust chips and related products from the same shelf, and 22 live products presented like the handmade goods they are.
Product pages that respect the product
Take Mystic Glade, a blue lotus and moss bath bomb. The page gives you the scent pyramid, the full ingredient list, the shelf it belongs to, and three quiet trust signals: made by hand in Portland, Oregon, skin-first small-batch ingredients, ships in 3 to 5 business days. Related products come from the same shelf, so a bath bomb suggests more bath and body, not a random grab bag. It reads like the maker walking you along her market table.
Workshops sell here too
Gnome's also hosts build-your-own tea party workshops for groups from 5 to 25 or more, and those are real products in the store rather than an inquiry form that goes cold. A group picks its size, books, and pays, the same way they would buy a lip balm. For a small maker, that turns a side offering into revenue with no extra admin.
A design system drawn by hand.
This is the part we are proudest of. The brand is woodland cottagecore, a gnome in a lavender field, so the site got a visual language built from scratch to match: eight hand-drawn SVG doodles (a fern, a toadstool cluster, a trailing vine, a branch with berries, a wildflower, a crescent moon, twinkling sparkles, and one small snail) tucked into the margins of every page. Sections flow into each other over rolling illustrated hills instead of hard edges. The palette moves from cream to warm white to a soft meadow green, and then the page crosses into night: deep forest-green sections where fireflies actually drift and glow while you read the ingredients list.
Hand-Drawn Doodles
8Original SVGs, drawn for this brand only
Live Products
22Pulled straight from the Shopify catalog
Journal Guides
3Each one wired to the products it explains
Structured Data
100%Product, Breadcrumb, FAQ, and BlogPosting markup
The details go deep because details are the brand. Blog posts open with an illuminated drop cap like a storybook page. Headlines get a hand-drawn honey underline. The handwriting accents are set in a real script face, and the footer is a night scene with a crescent moon and fireflies over the tagline "made by hand in Portland, Oregon." None of this comes from a theme marketplace, which is the point: her store now looks like her products, and nobody else can have it.
A journal where every guide can put a product in the cart.
People genuinely search for this stuff. What does a bath bomb actually do? Why does my shower steamer dissolve in a minute? We wrote the journal to answer those questions properly, grounded in the real ingredient lists from the catalog: the citric acid and baking soda that make the fizz, the jojoba and Epsom salt the fizz carries into the water, the polysorbate 80 that keeps color off the tub.
Then every guide links the reader straight to the shelf. The shower steamer guide walks through all six scents, and each one, from Breathe Breeze to The Luna, is one click from its product page. Every post carries FAQ and BlogPosting schema, so the answers are structured for Google and AI search from day one. As the brand grows, this is the foundation the SEO compounds on.
The Technical Edge
Astro front end
Every page is prerendered to static HTML, so the store opens fast on the phones where gift shopping happens. JavaScript only ships where it earns its place, like the cart drawer.
Headless Shopify
The catalog, inventory, and checkout stay in Shopify, the tool the owner already knows. The custom front end pulls from the Storefront API without inheriting a theme.
Cloudflare edge
The site is served from Cloudflare's global network, and product photography is optimized on the fly at the edge, resized and converted to modern formats per device.
Performance details handled
Fonts are self-hosted instead of loaded from Google's servers, hero images are prioritized for a fast first paint, and everything below the fold lazy-loads.
Schema on every page
Product, BreadcrumbList, FAQ, and BlogPosting structured data, so search engines and AI assistants can read the catalog and the guides without guessing.
Motion that respects the reader
The fireflies, twinkles, and scroll reveals all honor the reduced-motion setting, and the page reads perfectly with JavaScript turned off entirely.
See it live
The fastest way to get this site is to wander it. Start on a shelf, or jump straight to a product and scroll until you hit the fireflies.
Good places to start
Gnome's Creations already had the hard part: products with real charm, made by a real person in Portland. What they needed was a store that carried the same feeling, without adding a single new system for the owner to run.
Now the catalog she manages in Shopify flows into a storefront that could not belong to anyone else, the journal answers the questions her customers actually search, and the whole thing is built on a foundation that is ready to rank as the brand grows.
Selling something you make by hand?
Your store should feel like your product, and it can run on the Shopify catalog you already manage. Let's talk about a storefront nobody else can have.
Start Your Project