What the new store delivers over the old site

01 — Summary

Executive summary

The old site ran 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 did not carry, adds pages and a tutorials hub the old site never had, and fixes defects that were live before launch, including a homepage that scrolled sideways on desktop and phones and a search page that showed no results.

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

Critical defects resolved

Two defects were reproduced and measured on the old site on 28 July 2026, before the switch. Both are the kind a shopper hit on an ordinary visit, and both are resolved in the new build.

Fixed The homepage scrolled sideways, on desktop and phones

On a standard 1,333px desktop window the old homepage was 4,796px wide, so the page could be dragged 3,463px to the right past its own content. The same fault hit phones: at a 500px width the page was 1,500px wide, three times the screen. The cause was a decorative scrolling-text ("marquee") section that was 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.

Fixed The search results page showed nothing

Searching the old site returned a page whose title read "55 results found for paracord," but the results area was empty: the footer sat directly under the breadcrumb with no products between them. A shopper who searched saw a blank page and assumed the store had nothing. The new theme renders a working results grid with product cards, images, prices, and pagination.

Tested Built and tested across devices and browsers

The two defects above are what a shopper hit on the old site. 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:

• The announcement bar adapts: it rotates one message at a time on phones and shows all messages inline where they fit on desktop.
• The hero supports touch swipe as well as keyboard and dot navigation.
• The header stays sticky on every template, not only the homepage.
• Images including the heritage photo were checked in Safari, Firefox, and Chrome, and the cart and product-option labels were verified on phones.

03 — Performance

Speed & Core Web Vitals

The rebuilt store loads fast and holds its layout while it does. Google Lighthouse scores the new homepage well above the old site on the metrics shoppers and search engines actually feel.

Old site

New store

The overall Performance score moves from 76 to 97, driven by a large drop in blocking time (410ms to 50ms) and a faster largest paint (1.6s to 1.2s), with the layout staying stable as the page loads. The gains come from how the theme is built:

• Images served as WebP with responsive srcset, lazy-loaded below the fold, with explicit dimensions so nothing jumps.
• The main hero image is preloaded so it appears sooner, and elements reserve their space so the layout does not shift as the page loads.
• Scripts are deferred and small; the seam and decoration engines run without blocking the first paint.

A few Lighthouse metrics sit outside the theme's control. The Best Practices score and part of the blocking time come from third-party code that Shopify and installed apps (payments, analytics, reviews) add to every store, not from the theme. The metrics the theme owns, and that affect real shoppers and search ranking, are all in the green.

04 — Storefront

A storefront built around the brand

The old site used 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.

05 — Homepage

The homepage, rebuilt

The homepage is reorganized around what a craft shopper needs first: what to shop and who the company is.

• Hero — a marquee-bento hero with a rotating set of category and product tiles; the whole slide is clickable, where before only a small icon linked.
• Shop by category — the eight categories as image cards with live product counts, in a deliberate order.
• Bestsellers and DIY kits — curated rows using real studio photography, with skill-level badges on the kits.
• Heritage — a "Built by makers, trusted for generations" block telling the honest story from the 1917 shoelace beginnings, with linked heritage photos.
• Reviews — a brand-styled review section showing the store's existing Judge.me reviews.
• Stay connected — TikTok and Instagram feeds and a newsletter signup, matched to the brand.

06 — Navigation

Navigation & information architecture

Eight clear categories replace the 56 collections the old site carried, many of them overlapping, seasonal, or internal and impossible for a shopper to make sense of. A subcategory filter sits underneath each category.

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.

07 — Catalogue

Product names and descriptions

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.

• Descriptive names — a product reads as what it is and what it is for, which also helps on-site search and Google.
• Use cases — every product carries plain-language uses, so a shopper who does not know the material still understands what to make with it.
• Consistent voice — American English and one voice across the catalogue.
• Checked for accuracy — the rewrite was reviewed against each product's original data and photos, so a descriptive title stays true to the product.

08 — Classification

Classification & enrichment

Beyond names, each product gains a structured set of attributes the old site did not carry. 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.

The classification was done in place on the existing products, so a product keeps its identity and history; nothing was deleted and re-created.

09 — Photography

Product photography

The migration brings each product's cleanest image to the front. Across dozens of products the primary photo shown on the storefront was updated to the reviewed version from the new catalogue.

• Some products had a better image already on the product promoted to the primary position, so the first photo a shopper sees is the best one.
• Others received a newly set primary image: studio photos from a dedicated shoot (white-balanced, 2048px WebP), cleaned original product images, and a few manually prepared photos.
• In every case the earlier images are kept in place beneath the new primary, so nothing is lost.

This set is still being refined by hand, so the exact count keeps growing.

10 — Product page

The product page

The product page is rebuilt to answer a shopper's questions and to reflect the enriched data.

11 — Pages

New & rebuilt pages

Static pages were rewritten to the brand voice and, where the site had gaps, created.

Legacy pages that only the old site had are removed from every menu and link, so they no longer clutter navigation. The two old catalogue pages stay in place, reachable by direct link. The retired email-list and RSS pages now 301-redirect to the homepage and the blog, so their old URLs never dead-end.

12 — Content

Blog and the new tutorials hub

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, the address the product-packaging QR code will point to. Each guide links to the products it uses, and those products link back to it. This content is new to the store.

The hub is in progress. It is not yet linked anywhere in the site navigation, so today it opens only by typing the address directly; it joins the menus once the first real tutorials are published (the ones on the test site are placeholders). It is built to work like the catalogue page, so shoppers can filter tutorials by product, project type, and skill level, with a search box. How tutorials are written and uploaded is set out in the migration handover guide.

13 — Reviews

Reviews

Customer reviews are brought forward and branded, using the store's existing Judge.me data.

• Real per-product ratings and counts (already collected on the store) are read from Judge.me, so each product shows its own average.
• The review widget and the write-a-review form are styled to match the brand: orange stars and buttons, brand fonts, cream cards.
• A homepage review section and product-page widget present those reviews on the new design.

14 — Accessibility

Accessibility (WCAG 2.2 AA)

Accessibility is built into the new theme to WCAG 2.2 AA. The measures live in the theme itself:

• Skip-to-content link, visible focus indicators, and 44px touch targets.
• Semantic landmarks, one H1 per page, and a correct heading order.
• ARIA on the hero carousel, the colour swatches (radiogroup), and the menus, with keyboard support and Escape to close.
• A dedicated accessibility page sets out the store's accessibility standards.

Google Lighthouse scores the new store 97/100 for accessibility.

15 — SEO

SEO

The reorganization is structured to protect search ranking.

• Descriptive titles and metadata across products and pages, which read better in search results.
• Product URLs are unchanged — the handles stay fixed even though titles change, so every product link and its ranking survive with no redirects needed.
• Full 301 coverage for the collection reorganization and the blog alignment, so no previously indexed URL returns a 404.
• Clean sitemap and structured markup are in place, the sitemap has been submitted, and the coverage and 404 reports are being monitored.

The full SEO approach, including the sitemap submission and the 301 redirect coverage, is documented in the migration handover guide.

16 — Integrity

Migration safety & integrity

Everything above is delivered without putting the running business at risk. The transactional core is never touched, and the change is reversible.