WebsiteMattress brand e-commerce website Coming soon
Solenne
Premium direct-to-consumer mattress store with a which-mattress quiz, layer cross-sections, a compare page and a demo cart with a bundle discount.
More screenshots
Quiz result with a recommended mattress 
Product page with layer cross-section 
Compare the three mattresses 
Order summary with the pillow bundle discount
About Solenne
A soft, premium storefront for a direct-to-consumer mattress brand, shown here as the fictional Solenne with three mattresses and four accessories. A six-question quiz recommends a mattress and a firmness with its reasons and a shareable result, each mattress has an interactive SVG cross-section of its layers, a compare page sets the three side by side with the price in every size, and a slide-over bag applies free delivery and a pillow bundle discount before a demo order summary. Trial, delivery and recycling, workshop and materials, a journal and a FAQ. One designed light mode with night-blue sections, in Urbanist and Crimson Pro. Astro and Tailwind CSS 4.
Best for mattress and bedding brands, direct-to-consumer brands with a short product range, furniture makers and the agencies that build their stores.
Features
Which-mattress quiz
Six questions with per-option scores recommend one mattress and a softer or firmer option, with the reasons that pulled hardest. Answers are in the URL, so a result can be shared; without JavaScript a static guide table is shown.
Layer cross-section
Each mattress is drawn as an SVG block from its layers (thickness, texture and colour), with hover, focus and click highlighting linked to the description of each layer.
Compare page
Dusk, Meridian and Haven side by side: firmness, height, materials, who each suits, feel ratings, weight, trial and warranty, and the price in every size linked to the product page.
Demo cart
A slide-over bag saved in localStorage, with sizes and options per line, free-delivery progress, a 20% pillow bundle discount and a delivery fee, then an order summary with the order button disabled.
Product pages
Three mattresses and four accessories with sizes and prices, options, specs, feel ratings, product FAQ and demo reviews labelled as such. Prices come from one Markdown file per product everywhere.
Brand pages
100-night trial and returns, delivery and recycling, workshop and materials, a three-post journal and a FAQ in five groups.
Honest SEO
Product with an Offer per size, shipping and return policy, Brand, Organization, FAQPage, Article and BreadcrumbList structured data, deliberately without aggregateRating on demo reviews.
What's included
- Home
- Shop with 3 mattresses and 4 accessories
- 7 product pages
- Compare
- Which-mattress quiz
- Trial and returns
- Delivery and recycling
- Workshop and materials
- Journal with 3 posts
- FAQ
- Contact
- Bag and order summary (demo)
- Terms of sale, legal notice and privacy
- 404
Tech stack and fit
Built with
- Astro 7
- TypeScript
- Tailwind CSS 4
- Content collections
Who it's for
Mattress and bedding brands, direct-to-consumer brands with a short product range, furniture makers and the agencies that build their stores.
Tags
Solenne FAQ
Can Solenne take real payments?
Not as shipped. The cart and order summary work in the browser and the order button is disabled. The README describes three ways to connect a checkout: a cart service driven by data attributes, a store platform's buy button with size and firmness variants, or a hosted checkout session created by a small server function that recomputes prices.
How does the quiz choose a mattress?
Each answer adds scores per mattress in src/content/quiz.json; the highest total wins, the firm values decide between the softer and firmer option, and the answers that pulled hardest become the reasons. The answers are encoded in the URL, so a result can be bookmarked or shared.
How do I change products and prices?
One Markdown file per product in src/content/products: sizes and prices, options, layers, specs, feel ratings and FAQ. The product page, compare table, cart, quiz result and structured data all read them, so prices cannot drift apart. Shop rules (free delivery threshold, delivery fee, bundle discount, trial nights, warranty years) are in src/config/site.ts.
How are the layer drawings made?
LayerArt draws an SVG block from each mattress's layers: the height from the thickness in inches, a pattern per texture (foam, memory foam, springs, latex, wool and more) and a fill colour. Change the layers in the product file and the drawing follows.
Are the reviews and ratings real?
No. Reviews are fictional demo content labelled as such on the page, and the Product structured data deliberately has no aggregateRating. Add rating markup only with real, verifiable reviews. The template makes no certification or material claims.
Can I use it for something other than mattresses?
Yes, for any brand with a short range of considered products: sofas, bedding, bikes. Products, options, layers and the quiz are data files; the cross-section drawing is the most mattress-specific part.
Is there a dark mode?
No. Solenne ships one designed light mode with night-blue sections; colours are CSS variables at the top of src/styles/global.css.
When can I buy Solenne?
Solenne is coming soon: the live demo is online, and it goes on sale on Gumroad shortly at $29 USD, a one-time purchase with free updates.
Can I use Solenne for a client project?
Yes. The license covers personal and commercial projects, including client work. Reselling or redistributing the template itself is not allowed.
Related templates
Close in purpose or features to Solenne. Browse all 35 templates.
Solenne is coming soon. The whole demo is already online.