COMMERCE BEYONDTHE THEMECOMMERCEBEYOND THETHEME

An editorial hardware store

Most DIY retailers prioritize density: grids of similar cards, badges, filters and promotional banners. RUMMA uses magazine-like pacing to give functional commerce more context and character.

Forum serif carries expressive headlines while Montserrat handles prices, navigation, product information and controls. Forest green, paper white, warm cream and subtly tinted neutrals create a recognizable world without decorative color noise.

Motion is part of the same system. Product imagery expands within its frame, headlines reveal with controlled timing, and controls respond physically. GSAP and Lenis coordinate the experience while reduced-motion, data-saving and slow-connection conditions keep the content accessible first.

Discovery modeled as a graph

DIY customers may begin with a room, task, material, brand or technical requirement rather than a product name. The storefront supports editorial selections, departments, subcategories, search, brands, related products, accessories and contextual category links.

The visible hierarchy remains understandable—home, department, subcategory, product—but the underlying information architecture is a graph. One category can belong to several departments while retaining a permanent URL and one deterministic breadcrumb path.

Search, multi-select filters and sorting belong to URL parameters and are processed on the server. State stays shareable, refresh-safe and compatible with browser history, while filtered variations are canonicalized to protect the primary category page.

• Real server-rendered links before hydration
• Stable URLs across changing merchandising relationships
• Desktop refinement and a dedicated mobile filter drawer
• Complete crawl paths and explicit catalog relationships

Configuration beyond standard variants

Some products require more valid combinations than Shopify's standard option model can express cleanly. RUMMA represents each purchasable configuration as a real product with its own URL, SKU, price and inventory state, then joins siblings through Shopify metaobjects.

Selecting an option navigates to the corresponding sibling product. The exact choice remains linkable, server-rendered, refresh-safe and predictable in browser history, while listings expose only one representative configuration to avoid a catalog of near-duplicates.

The model also distinguishes modifiers from accessories. A modifier belongs to a specific configured unit and remains grouped with its parent in the cart; an accessory is an independent product with its own SKU and inventory. Cart operations use Shopify line IDs so identical modifiers attached to different parents remain independent.

Language and cart state treated as product architecture

Swedish is the default language and English is secondary. Interface language lives in synchronized application dictionaries, while product and merchandising content remains editable in the commerce backend. Locale is explicit in every cached commerce function, so responses cannot leak between languages.

The cart responds optimistically to additions, removals and quantity changes, then reconciles directly with Shopify's authoritative mutation response. Public catalog data and private cart state follow deliberately different caching strategies.

• Grouped configured products and modifiers
• Group-level quantity and removal controls
• Accessible live purchase announcements
• Touch-friendly interactions and coordinated drawer behavior
• A safe handoff to hosted checkout

Performance and SEO built into the model

React Server Components are the default. Client JavaScript is introduced only for interaction, browser state or animation, and narrow Suspense boundaries keep product names, prices, imagery, breadcrumbs and key links in the initial server-rendered document.

Tagged caching separates products, collections, pages and menus, with Shopify webhooks invalidating the relevant content. Self-hosted fonts and responsive image optimization reduce external dependencies and payload waste.

Every indexable entity has one canonical URL. Product, collection, brand and breadcrumb structured data is generated safely, Swedish and English pages publish paired alternates, and filtered routes remain navigable without becoming competing search results.

One framework tradeoff was documented explicitly: streamed unknown catalog routes may return a soft 404 before the entity check resolves. I protected them with noindex and verification tooling rather than adopt a build-time allowlist that could block newly published products until the next deployment.

Designed for the people operating the store

A sophisticated storefront fails if routine catalog work depends on fragile manual administration. I built Shopify Admin API tooling for product creation, data backfilling, image cleanup, catalog audits, category-graph synchronization, configurable families, navigation imagery and translation verification.

Mutating workflows support a dry-run-first process. Credentials and privileged operations remain server-side, webhook validation is timing-safe, external content is escaped before structured-data serialization, and Content Security Policy behavior can be evaluated without silently breaking checkout.