Demo

A sandbox for the category and product page flow. The approved site design, stylesheet and live pages are untouched — everything here lives in /demo/ and can be deleted without a trace.

Live site

Layout Demo

Two pages, built to the flow from the meeting recap

These are working demos of steps 3 and 4 of the shopper journey, laid out against the retailer example that was shared. They reuse the approved header, hero band, blue/green title band, typography, color palette and footer exactly as signed off — only the middle of the page is new, and all of the new CSS lives in a separate demo-only file.

Product lines, item numbers, colors, sets and photography are real, pulled from what is already on the site. Pricing, ratings, reviews and facet counts are placeholders and are labelled as such on the page.

Step 3 — Category pageModel: the retailer’s “Pencils” category

The shopper has chosen a category and now sees the product groups in it, never the full item list. Fifteen lines across four brands.

  • Category icons and captions for sibling categories
  • Left refine rail: category, brand, format, good for
  • Product name, option count (open stock + sets), MSRP range, one advance button
  • Grid / detail view toggle and sort
  • Category FAQ copy at the bottom for SEO and support
Open the category demo
Step 4 — Product line pageModel: the retailer’s Caran d’Ache Luminance page

One product line on one page: the copy that sells it, then a purchase area split into sets and open stock colors.

  • Gallery with thumbnail rail and captions
  • Selling copy with bullets and an expandable long description
  • Sticky section nav: shop, specs, resources, reviews, Q&A, related
  • Sets table with item number, MSRP, quantity, add to cart
  • Open stock colors as a swatch grid, buyable one at a time
Open the product demo

Where these pages sit in each journey

Green = built in this demo

Journey 1 — shop by brand

Step 1

Homepage — shop by brand

Shopper picks a brand, e.g. Caran d’Ache. Exists today

Step 2

Brand page — categories

Column C categories for that brand, as icons with captions. Exists today

Step 3

Category — product groups

Column D product groups with options, MSRP range and an advance button. Demo

Step 4

Product line page

Sets and open stock, specs, resources. Demo

Journey 2 — shop by category

Step 1

Homepage — broad category

Shopper picks a department, e.g. Art Supplies. Exists today

Step 2

Categories in that department

All column C categories under the column B broad category, as icons with captions.

Step 3

Category — all brands

Same template as journey 1, but every brand that offers the category. Demo

Step 4

Product line page

Identical destination for both journeys. Demo

Open questions for the call

The decisions that change the build, not the paint
  1. Cart or referral? The demo shows Add to Cart and MSRP. If the site stays wholesale-facing, the same layout works with “Find a retailer” and MSRP for reference only. This one decision affects every product page.
  2. How do we count options? Luminance is 100 open stock colors + 7 sets = 107. Confirming this split for every product line is what makes the category cards trustworthy, and it comes straight out of the product workbook.
  3. Pricing. Do we publish MSRP ranges publicly, show them only to signed-in dealers, or leave pricing off entirely?
  4. Reviews and Q&A. Worth having, or replaced with editor-controlled “artist notes” and a category FAQ? Reviews need moderation once they exist.
  5. Facets. Category and brand are easy because they come from the workbook. Format, “good for” and “lightfast rated” need someone to tag products once — worth it, but it is real work.
  6. Product imagery. Caran d’Ache is well covered. Sennelier, e+m, Möbius + Ruppert, Raphael, Isabey, Pépin, Stifflex and Flexbook still fall back to a brand logo, which is visible in the category grid.
  7. Copy. Every product line needs a short paragraph and five or six bullets. Fifteen lines in Pencils alone — who writes them, and do we take them from the catalog?

Notes on how this was built

Nothing about the approved design changed

Both demo pages start from the existing Pépin product-line page and keep its header, hero band, blue and green title band, and footer markup as-is. They load the live css/styles.css untouched, then a second stylesheet, demo/css/demo.css, whose selectors are all scoped to demo- class names so they cannot reach the live pages.

The new components borrow the existing palette and type scale — the red for calls to action, the blue for navigation and headings, the green for confirmation, Helvetica at the same sizes — so the additions read as part of the same design rather than a different one.

What is real and what is placeholder

Real: product lines, item numbers, color names, set sizes, product photography, option counts for Caran d’Ache, and every link out to a live page.

Placeholder: all pricing, star ratings, review text, filter facet counts, and the downloadable charts. Placeholders are marked on the page so nothing gets mistaken for data.

Deleting the demo

Everything is contained in the /demo/ folder — three pages, one stylesheet, one script. Removing the folder removes the demo completely; no live file needs to be reverted. The pages also carry noindex so search engines leave them alone in the meantime.