Noble Muse

Noble Muse is a free, static e-commerce theme for Astro that reproduces the layout patterns of premium womenswear shops — transparent-to-solid masthead, full-height campaign slider, hover mega menu and Shop the Look hotspots — built on Astro 5 and Tailwind CSS v4.

What is Noble Muse?

Noble Muse is a free fashion e-commerce storefront theme for the Astro framework, styled with Tailwind CSS v4 and state management via nanostores. It takes a bundled 28-piece mock catalogue (or a Shopify Storefront API connection) as input and outputs static product pages with Product JSON-LD and Open Graph metadata. It is published as part of the classic theme line at njxui.dev and ships under the MIT license.

Key Features

• Transparent-to-solid masthead — fixed over the hero, turns solid white on scroll, hover or search; centred tracked-out wordmark with a lilac "Last Chance" label.
• Campaign hero slider — three full-height slides with monospace shot notes and dash indicators.
• Hover mega menu — categories, curated highlights and a collection feature panel.
• Slide-down search — live results plus popular-search chips.
• Shop the Look — masonry of looks where a "+" hotspot opens the pieces worn in each look, with add-to-bag.
• Product cards — hover crossfade to the full-look shot, quick view, and inline quick-size add that pushes straight into the bag drawer.
• Cart and wishlist drawers — free-shipping progress bar and move-to-bag.
• Catalog filtering — category, size and colour selects, a max-price slider and sorting; reads ?cat= and ?tag= from the URL.
• Shopify integration — two environment variables plus a provider switch move the commerce layer from mock data to the Shopify Storefront API.
• SEO-ready — static product pages with Product JSON-LD and Open Graph tags.

Who is it for?

• Astro developers building a fashion storefront: start from a complete editorial layout instead of assembling hero, mega menu and drawers from scratch.
• Shopify merchants wanting a static front end: point the provider at a Shopify Storefront token and keep the design while serving static pages.
• Theme tinkerers learning premium retail layouts: read a working implementation of hotspot product discovery and drawer-based cart flows.

What can you do with Noble Muse?

• Rebrand quickly: edit categories, colours and the 28-piece catalogue in scripts/gen-catalog.py, and the ink, lilac and paper design tokens in src/styles/global.css.
• Deploy anywhere static: output works on Cloudflare Pages, Netlify, Vercel or GitHub Pages, with one-click deploy buttons for Vercel and Netlify.
• Run without accounts: npm install && npm run dev starts on the bundled mock catalogue with no keys or accounts required.

Pricing

Noble Muse is free under the MIT license for personal and commercial projects; a link back to njxui.dev is appreciated but not required.

FAQ

Does Noble Muse require a Shopify account?

No. It runs out of the box on a bundled 28-piece mock catalogue with no keys or accounts. Connecting Shopify is optional and requires setting COMMERCE_PROVIDER=shopify along with a store domain and Storefront access token.

Which framework and styling system does Noble Muse use?

Noble Muse is built on Astro 5 with Tailwind CSS v4 and nanostores for client state. It produces static output, so it deploys to Cloudflare Pages, Netlify, Vercel or GitHub Pages without a server.

Can I use Noble Muse commercially?

The theme is MIT licensed, so it is free for both personal and commercial projects. The only ask is an appreciated-but-not-required link back to njxui.dev.