Boutique

Boutique is a free, MIT-licensed one-page Astro theme for independent boutiques, showrooms and small retail brands, built around a dark scroll-driven design where every animation is a pure function of scroll position and reverses cleanly on the way back up.

What is Boutique?

Boutique is a single-page website template built on the Astro framework, published by Sv3n under the MIT license. You feed it content through one config file — src/config.ts holds all copy, links and image paths — and it produces a static site in ./dist via npm run build, or a live dev server on http://localhost:4321 via npm run dev. It ships with placeholder images you are expected to replace with your own photography.

Key Features

• Scroll-linked animation system — everything moves as a pure function of scroll position and reverses on scroll-up; a pinned hero lifts a curtain and docks the logo into a frosted-glass header.
• "New in" card fan — product cards fan out from a single stack, with tilt and hover lift on interaction.
• Sideways-scrolling lookbook — a horizontally scrolling gallery with per-image aspect ratios, crop positions and drift amounts configured in config.ts.
• Parallax interior shots and full-bleed photo band — a photographic band carrying a pull quote.
• Brand grid — add brand logos as SVGs (black on transparent, inverted to white automatically) or leave them as text.
• Shop cards with directions and WhatsApp — contact/location blocks for retail locations.
• Minimal JavaScript footprint — about 4 kB of JS and zero client-side dependencies; respects prefers-reduced-motion.
• Design tokens — colours, fonts and spacing set in the tokens at the top of src/styles/global.css; section order controlled in src/pages/index.astro.

Who is it for?

• Independent boutique owners: launch a one-page presence with shop cards, directions and WhatsApp contact without touching components.
• Showrooms and small retail brands: present a lookbook and product "new in" cards using their own photography.
• Designers customizing a base: reorder sections and retune colour/font tokens in one CSS file.

What can you do with Boutique?

• Boutique launch: set shop name, title, description and logo under site in src/config.ts, drop photos into public/images/, and build a static site.
• Lookbook publishing: define per-image aspect ratios, crop positions and drift amounts for the sideways lookbook and interior shots.
• Brand presentation: add brand SVG logos that are automatically inverted to white, or keep them as plain text.

Pros and cons

• Ships with a footer "Theme by Sv3n" link with UTM parameters; removable by setting credit.enabled to false in src/config.ts.
• Fonts load from Google Fonts (Inter); self-hosting requires swapping the <link> in src/layouts/Layout.astro for @fontsource/inter.
• Images are generated placeholders and must be replaced.

FAQ

Is Boutique free?

Yes. Boutique is released under the MIT license, copyright Sv3n. The footer includes a small "Theme by Sv3n" credit link with UTM parameters, which can be removed by setting credit.enabled to false in src/config.ts.

What framework does Boutique use?

Boutique is built on Astro and produces a static site. It uses roughly 4 kB of JavaScript with zero client-side dependencies, and styles are controlled through tokens in src/styles/global.css.

Do I need to edit components to change content?

No. All copy, links and image paths live in src/config.ts; section order is set in src/pages/index.astro. You should not need to touch the components for a normal site.

Does Boutique support reduced motion?

Yes. The theme respects the prefers-reduced-motion user preference, and its scroll-driven animations are pure functions of scroll position, so they reverse cleanly when scrolling back up.