Pepperell Crafts. Make it yours.

How the filter panel works

The collection page on pepperellcrafts.com has no filter sidebar today. Only sort, by price or date. The new theme renders Shopify's faceted filter panel on every collection. Filters read from product metafields: material, project type, color, skill level, audience, made in USA, kit and value-pack flags.

The panel is sticky against the left rail on desktop and opens as a slide-in drawer on mobile. Active filters show as pills above the grid and clear in one click.

URL structure

Clean and readable. Collections sit at /collections/cords-lacing, products at /products/{handle}, static pages at /pages/{handle}. Search is /search?q=. Filters write to the URL as ?filter.p.m.custom.material=Cotton.

No session IDs in URLs, no tracking parameters bolted on at the storefront level. Any filtered result is shareable and the back button works the way visitors expect.

How a product lands in a category

Deterministic, not guessed. A product is assigned to a category only when its tags or its existing pepperellcrafts.com description contain keywords mapped to that category. A small set of edge cases has explicit SKU overrides written into scripts/classify-catalogue.mjs.

The script runs against the live Pepperell Crafts product feed and gives the same result on every run, so the IA stays reproducible.

Why seven, not seventeen

A first-time visitor on pepperellcrafts.com looking for cord has to know in advance that Bonnie Braid, Parachute Cord, REXLACE® and Cotton Craft Cord are all cord. Promoting intent above brand removes that prerequisite. The seven tiles scan in a few seconds, the seventeen brand pages still exist underneath as filter values, and customers who already shop by brand reach the same page in one click from the homepage carousel.

Structured spec table

A 23-row spec table reads from product metafields under custom.*: Material, Format, Pages, Author, Publisher, ISBN, Dimensions, Diameter, Length, Breaking strength, Quantity per pack, Color options, Wick type, Use, Finish, Includes, Project type, Skill level, Audience, Brand, Country of origin, Care. Any row whose metafield is blank simply does not render.

The values come from a per-product audit against the live pepperellcrafts.com page, so a book lists pages and ISBN, a paracord listing lists diameter and breaking strength, and a candle wick lists wick type.

Use cases, How to use, Care

Below the description sits a tabbed block. Each tab heading maps to a metafield: "Use cases" reads custom.use_cases, "How to use" reads custom.how_to_use, "Care" reads custom.care_long. When the metafield is empty the merchant's editor content shows instead, so nothing breaks if a tab has not been authored yet.

The Use cases tab was written per product against the live page, so a candle kit talks about candle making and not about friendship bracelets, and a paracord cord talks about lanyards and survival bracelets rather than candle making.

Variant image swap

Clicking a color swatch swaps the main gallery image to the matching variant photo. The mapping uses the variant's featured_image ID first, then falls back to filename matching. Around 200 color names are mapped to brand swatches in swatch-color.liquid, including named hex colors and gradient patterns (camo, tie-dye, rainbow, sparkle, holographic).

The live pepperellcrafts.com PDP shows color names in a text dropdown. No visual swatches, no image swap on selection.

Sticky mobile add-to-cart

On mobile the inline add-to-cart button is mirrored as a sticky bar pinned to the bottom of the viewport, with the variant title and price always visible. The bar appears once the inline button scrolls out of view.

The live pepperellcrafts.com PDP has no sticky mobile add-to-cart. A visitor who scrolls through the description has to scroll back up to buy.

Page shell

A cream hero band at the top with an eyebrow, an H1 with an optional Market Pro accent word, a one-line dek, and a hand-drawn brand illustration on the bottom-right corner. Below the hero, the body lays out as a two-column grid on desktop with a sticky table of contents on the left, generated automatically from the H2s the merchant types into the page editor.

Per-page templates

Each page picks the right turnkey JSON template in the page editor. About adds a four-stat heritage strip and alternating image-with-text bands. Shipping & Returns surfaces the three numbers customers came for as a stat strip above the policy text. FAQ runs an accordion. Contact pairs the form with an address card.

Prose styling

Inside the body. H2s carry a brand-stroke underline. Blockquotes render as pull-quotes in Market Pro orange with a left rule. List markers swap to a brand-orange glyph. Wrapping a paragraph in <div class="callout"> renders it as a cream card mid-page without touching theme code.

Why it matters

The pages where a first-time customer decides whether to trust Pepperell Crafts are About and Shipping. Putting the numbers and the heritage proof above the fold reduces the time-to-answer on both. The page body stays inside Shopify Admin, so any future copy change happens in the page editor, not in the theme.