storefront-theming

What problem does it solve?

This Skill enables the creation of highly customizable storefronts that can be re-skinned for multiple brands, support dark mode, and facilitate white-labeling without altering core component code.

Core Features & Use Cases

• Design Token System: Implement a robust theming architecture using design tokens and CSS custom properties.
• Platform Adaptability: Provides specific guidance for Shopify, WooCommerce, BigCommerce, and custom/headless platforms.
• White-Labeling & Dark Mode: Supports multi-brand variants and runtime theme switching for dark mode.
• Use Case: Launching a new e-commerce platform that needs to serve distinct visual identities for three different brands from a single codebase, ensuring brand consistency and easy rebranding.

Quick Start

Configure the theming system on your Shopify store by using the Theme Editor's Color scheme settings and editing config/settings_schema.json and assets/base.css to add custom CSS variables.