Scaling Storefront Experiences at NextCommerce

Designing and building the base theme, reusable sections, and template systems used to launch and scale storefronts across brands.

At NextCommerce, I worked on evolving the storefront layer from a collection of templates into a flexible, system-driven experience architecture.

Built on Django-style storefront templates (template tags and filters), themes act as a dynamic rendering layer—translating ecommerce data such as products, pricing, and configuration into user-facing experiences.

My role focused on frontend development—designing and building the base theme (extended from the platform’s theme model and the public intro-bootstrap starter), reusable sections, and conventions that agencies and internal teams use with Theme Kit (ntk) to develop, push, and watch changes locally.

Storefront Themes as a System Layer

Storefront themes are more than presentation—they sit between backend ecommerce logic and frontend UI, shaping how data becomes a usable experience.

• Rendering product and pricing data dynamically
• Supporting variant selection and product state changes
• Adapting to catalogue, product, cart, and content page types
• Ensuring consistency across brands and markets

Foundation: Base Theme & Reusable Architecture

A core part of this work was developing the base storefront theme—a shared foundation used across multiple brands and projects.

This established a consistent structure for how storefronts are built and extended, reducing duplication and improving long-term maintainability.

• Aligned with the platform theme layout: layouts/, partials/, templates/, assets/, and configs/
• Defined layout primitives and section-based architecture
• Created reusable components for product, content, and marketing use cases
• Standardised how data is passed into templates and rendered
• Enabled safe extension for agencies and client teams via Theme Kit

This allowed teams to build new storefronts quickly without needing to recreate core structure or logic.

Theme Architecture & Developer Conventions

The base theme wasn’t just a collection of components—it defined a set of conventions for how storefronts should be structured and extended.

I focused on creating a system that other developers and agencies could work within confidently, with clear patterns for layout, data usage, and component structure.

• Predictable file structure and template organization
• Clear separation between layout, sections, and reusable components
• Consistent naming conventions and data access patterns
• Guardrails to reduce fragile or inconsistent implementations

Template Logic & Theme Objects

Storefront themes use the platform’s Django-style template language, where backend ecommerce data is exposed through structured theme objects directly in the rendering layer.

I worked with these objects to drive UI behaviour across product pages, collections, and promotional content.

• Product objects define attributes, pricing, and availability
• Variant data supports dynamic selection and UI updates
• Cart and storefront context shape user interactions
• Theme settings enable configurable content and layout

The complexity isn’t just displaying data—it’s ensuring the UI accurately reflects all possible product states, pricing conditions, and user interactions.

Product Variants & Dynamic UI

Product variant handling is a key part of the storefront experience layer.

I worked on frontend patterns that ensure variant selection is reflected correctly in the UI—affecting pricing, availability, and selection-driven content.

• Variant-aware product interfaces
• Clear handling of availability and out-of-stock states
• Dynamic updates based on user selection
• Reusable patterns across multiple storefront implementations

This ensured that complex product configurations remained intuitive and consistent for users.

Theme Editing & Configuration

Beyond development, themes needed to be usable by operators, marketers, and agencies working across multiple brands.

I helped structure themes to support configurable settings—allowing content and layout to be adjusted without modifying code.

• configs/settings_schema.json driving the theme editor and settings_data.json for stored values
• Configurable sections and content blocks
• Flexible layout variations within a shared structure
• Safer editing workflows for non-technical users

Designing for Developer & AI Workflows

The theme system was also structured with modern development workflows in mind—including AI-assisted development.

This meant creating templates and components that are easy to understand, extend, and reason about—both for developers and tools that rely on contextual code interpretation.

• Self-descriptive components and template structure
• Clear data flow and minimal hidden logic
• Consistent patterns that can be reliably extended

This approach improves onboarding speed and reduces the likelihood of errors, especially when multiple teams or agencies are working within the same system.

Geo-Aware UX & Localization

Storefronts needed to dynamically adapt based on user location—impacting currency, language, product availability, and pricing.

I implemented frontend patterns that integrate with backend signals to ensure:

• Accurate currency formatting and price display
• Region-specific product configurations
• Seamless switching between locales

This ensured users always saw a relevant and consistent experience.

Performance in High-Traffic Storefronts

Storefronts often operate in performance-sensitive environments—heavy media, third-party integrations, and spikes from marketing traffic.

This required balancing performance with flexibility—ensuring fast load times without limiting functionality.

Store Customisation Beyond the Core Theme Layer

Alongside the core theme system, I also worked in areas where more advanced storefront behaviour was required.

In these cases, the Storefront GraphQL API supports behaviours that outgrow templates alone—custom cart drawers, pre-purchase upsells, and other dynamic cart interactions—while the core theme layer stays maintainable.

This gives merchants tailored UX without pushing every edge case into theme markup.

System Thinking: Data → UI

Outcome

The result was a storefront system that treats themes as a programmable layer—capable of adapting to different products, markets, and merchandising needs.

By combining Theme Kit workflows, configurable theme settings, reusable components, and GraphQL where needed, we created a system that supports both flexibility and consistency across projects.

This reduced duplication, improved developer experience, and made it easier for teams to build and maintain high-performing storefronts at scale.