Pepperell Crafts · Internal report
A complete account of the work behind the migration: a brand-built storefront, a reorganized and enriched catalogue, rebuilt pages, a new tutorials hub, and real defects fixed. Every "before" claim in section 02 was verified against the live store on 27 July 2026; the rest is drawn from the build record.
01 — Summary
The live store runs a generic third-party theme (Athens) over a catalogue organized as 56 loosely related collections. The new build replaces the theme with one designed around the Pepperell brand, reorganizes the catalogue into eight clean categories, gives every product a descriptive title and a structured set of attributes it does not carry today, adds pages and a tutorials hub the site never had, and fixes defects that are live on the site now, including a homepage that scrolls sideways on desktop and phones and a search page that shows no results.
Every published product gets a descriptive title, a structured set of attributes, and one of the eight categories.
A confusing 56-collection menu becomes eight clear categories with a subcategory filter.
An over-width homepage (desktop and phones) and an empty search results page, both measured on the live site.
Category, type, material, brand, skill, and use cases, where the live catalogue carries none.
Nothing about the store's transactional core changes. Orders, customers, checkout, tax, and every sales channel and pixel stay exactly as they are; the catalogue is edited in place so no product loses its identity.
02 — Fixes
Two defects were reproduced and measured on the live site on 27 July 2026. Both are the kind a shopper hits on an ordinary visit, and both are resolved in the new build.
On a standard 1,333px desktop window the live homepage is 4,796px wide, so the page can be dragged 3,463px to the right past its own content. The same fault hits phones: at a 500px width the page is 1,500px wide, three times the screen. The cause is a decorative scrolling-text ("marquee") section that is never clipped, combined with the page allowing horizontal scroll (html, body { overflow-x: visible }). The new theme clips overflow at the page edges (overflow-x: clip), so the layout holds at every width.
Searching the live store returns a page whose title reads "55 results found for paracord," but the results area is empty: the footer sits directly under the breadcrumb with no products between them. A shopper who searches sees a blank page and assumes the store has nothing. The new theme renders a working results grid with product cards, images, prices, and pagination.
The two defects above are what a shopper hits on the live site today. Separately, the new theme was built and checked on real WebKit (iOS Safari's engine) and Chromium at phone and desktop sizes, so its own layout holds where a generic theme can be inconsistent:
03 — Storefront
The live store uses an off-the-shelf theme with off-brand type, colour, and layout. The new theme is built from the Pepperell brand book, so the identity is consistent on every page.
| Element | What the new theme brings |
|---|---|
| Typography | Poppins for headings, Zilla Slab for body, and the self-hosted Market Pro for the script accent, matching the brand pairings rather than the theme's defaults. |
| Colour | The brand palette throughout: main orange, primary dark for hovers, warm cream and lavender for alternate sections, warm taupe for accents, contrast-safe link colours. |
| Section transitions | Hand-built organic "wavy seam" edges between sections in place of hard straight lines, with a consistent renderer so adjacent seams differ and tile with no visible gap at any width. |
| Illustration | Brand doodle watermarks and heritage "polaroid" photos placed as background decoration, with merchant controls to hide them per section. |
| Motion | Subtle, reduced-motion-aware interactions: hero swipe on touch, keyboard and dot navigation, no layout shift on load. |
The theme is also built to be run by the Pepperell team without a developer: roughly 240 settings carry plain-English help text, four craft fields are dropdowns, and a standalone manual documents every screen.
04 — Homepage
The homepage is reorganized around what a craft shopper needs first: what to shop and who the company is.
05 — Navigation
Eight clear categories replace the 56 collections the live store carries today, many of them overlapping, seasonal, or internal and impossible for a shopper to make sense of. A subcategory filter sits underneath each category.
| Now (live) | New build |
|---|---|
| 56 collections, including duplicates, holiday and overstock lists, and internal ones, all reachable from the menu | Eight categories: Cords & Lacing; Kits, Books & Patterns; Beads, Findings & Closures; Wood, Slates & Naturals; Tools & Workshop; Decor, Toys & Finished Pieces; Oil Lamp & Specialty Candle Supplies; Industrial Products |
| No consistent subcategory filter | A Product-type filter (Paracord, Macramé Cord, Kits, and so on) on every category page |
| Menu and footer point at the old, tangled set | Main menu and footer rebuilt to the eight categories, with the current category highlighted |
| Old collection links would break under a reshuffle | Every retired collection URL gets a 301 redirect to its new category, so nothing 404s and search ranking is preserved |
Categories are driven by a single product field (main_category), so membership is automatic and stays correct as the catalogue changes, rather than hand-maintained lists that drift.
06 — Catalogue
Every product gets a descriptive, searchable title in place of the short internal name it carries today, and its description is rewritten in a consistent voice. The rewrite was checked against each product's original data and photos so it stays accurate and adds no claim the source does not support.
"2mm Bonnie Braid 100 yards" becomes "Bonnie Braid Macramé Cord 2mm x 100yd, Polypropylene, 17 Color Options." The URL handle is unchanged and the original title is kept for rollback.
97% of the catalogue reworded to one consistent voice and checked for accuracy; seven kept their original copy.
Structured product data across 28 fields, written from zero on the live store (detail in the next section).
07 — Classification
Beyond names, each product gains a structured set of attributes it does not carry on the live store today. The migration writes 2,580 attribute values across 28 fields, up from zero. Each value was read from the product's own photos and description, and it powers the category pages, the filters, and the spec tables.
| Attribute | What it does |
|---|---|
| Main category | Places the product in one of the eight categories. Every published product carries one (273 of 273). |
| Product type | The subcategory (Paracord, Macramé Cord, Kit, and so on) that drives the storefront filter. |
| Material | A material list drawn from 25 values, holding two to four for genuine multi-material kits (all 273). Each value was checked against the product's photos and description. |
| Brand | Read from packaging evidence: house and licensed brands (Cora's, REXLACE, Ezzzy-Jig, Silkies, and others), on all 273. |
| Skill level | Set only where it is meaningful (kits), so the filter is not polluted by raw materials. |
| Audience, project, country | Structured values used for search, filtering, and the spec table, shown where useful (audience 96, project 236, country of origin 199). |
| Use cases | Plain-language "what you can make" for every product (273 of 273), so the material is not the only clue to what it is for. |
| Specifications | Category-appropriate spec fields feed the product spec table: diameter, length, tensile strength, colour count, and pack quantity for cords and beads; wick type, burn rate, and container size for candle supplies; ISBN, author, publisher, and page count for books. |
The classification was done in place on the existing products, so a product keeps its identity and history; nothing was deleted and re-created.
08 — Photography
A dedicated photo shoot produced clean, white-balanced studio images. The migration sets them as the primary photo on 40 products, in place of the older image the live store shows today.
09 — Product page
The product page is rebuilt to answer a shopper's questions and to reflect the enriched data.
Colour options show named swatches with hover labels; kit styles render as readable text pills.
Every one of the catalogue's colour values maps to a real swatch, including gradients for camo, tie-dye, and rainbow.
Material, size, and the structured attributes render as a clean, metafield-driven table.
Per-product average stars from Judge.me, shown only where reviews exist, with "Be the first to review" otherwise.
Plain-language "what you can make" guidance on every product.
"Products used in this tutorial" cards connect products to the new tutorials, and back.
10 — Pages
Static pages were rewritten to the brand voice and, where the site had gaps, created.
| Page | Status | What changes |
|---|---|---|
| About | Rewritten | A customer-facing origin story from the 1917 shoelace factory, on the new page design. The current live copy carries a grammatical slip ("was in established in 1917") and a broken image, both cleared in the rewrite. |
| Contact | Rewritten | Brand-styled, with a Veteran's Discount enquiries block. |
| Shipping & Returns | Rewritten | Clear, current policy in plain language. |
| FAQ | Expanded | A fuller set of real questions and answers. |
| Track Order | New | A guest-first order-tracking page the live site does not have today. |
| Accessibility | New | A dedicated accessibility statement. |
| Policy pages | Styled | Brand-styled to match the new theme. |
Legacy pages that only the live store has (old catalogues, an email-list page, an RSS page) are kept in place but removed from every menu and link, so they no longer clutter navigation.
11 — Content
The blog is tidied and aligned, and the site gains a tutorials section it never had.
The blog is consolidated to a single clean address (/blogs/blog) on the new design. All 47 existing articles are kept, with redirects so old links keep working.
The site also gains a tutorials hub at /blogs/tutorials: filterable how-to guides, each linked to the products it uses and linked back from those products, with technique tags and a "how it works" explanation. This content is new to the store.
12 — Reviews
Customer reviews are brought forward and branded, using the store's existing Judge.me data.
13 — Performance
The store is built to load fast and hold its layout while it does.
srcset, lazy-loaded below the fold, with explicit dimensions so nothing jumps.14 — Accessibility
Accessibility is built into the new theme to WCAG 2.2 AA. The measures live in the theme itself:
15 — SEO
The reorganization is structured to protect search ranking.
16 — Integrity
Everything above is delivered without putting the running business at risk. The transactional core is never touched, and the change is reversible.
| Preserved as-is | How |
|---|---|
| Orders, customers, checkout, tax | Never read or written by the migration. A theme change cannot affect them. |
| Every app (12), channel, and pixel | All are store-level, not theme-level: Meta, Google, TikTok, Judge.me, Avalara, ShipStation, and the rest stay active. Verified against the live admin. |
| TikTok, Google, and Shop feeds | Products are updated in place, so every product keeps its identity and its feed mapping. No product is deleted and re-created. |
| Reviews and tax data | Store-level app data, untouched; the existing metafields are read, never overwritten. |
| The current look, as a fallback | The present theme stays in the library. Re-publishing it restores the old storefront in one click; catalogue changes revert from a saved snapshot. |
The migration was proven with a read-only dry run against the live store before any change: all 273 published products match one-to-one, so every product is updated in place and none is missed or re-created.