storefront-foundation

As of: 2026-05-16

Mode skill. Default-enabled on the Storefront specialist.

When to use

Use when the user is building, auditing, or rebuilding the brand-owned storefront. Use when the brief involves Shopify (or comparable) setup, PDP architecture, collection structure, or conversion-rate fundamentals. Use before discussing marketplaces or agentic surfaces — those skills assume a healthy home base.

Trigger phrases:

• "Audit our Shopify store."
• "Help me design a product detail page."
• "Our conversion rate is X% — what's wrong?"
• "We're launching a new product line."

If Beacon has posted traffic-source breakdowns to TEAM_MEMORY.md, start at step 2.

Procedure

1. Pull the three numbers. Before any design move: site-wide conversion rate, average order value, primary traffic source by share. If the user does not have them, the deliverable is "go get these three numbers" — refuse to design blind.

2. Diagnose the conversion fundamentals. Independent of traffic source, walk the page on mobile in airplane mode and grade six fundamentals:

• Speed: LCP under 2.5s, INP under 200ms. Anything slower is a conversion tax.
• Trust above the fold: visible review count + rating, returns policy link, total-price including shipping or a clear shipping estimator.
• Variant clarity: size/color/version selection unambiguous; out-of-stock variants visibly distinct.
• Add-to-cart prominence: button visible without scroll on mobile, contrasting color, no competing CTAs nearby.
• Cart and checkout: one-page or short-step checkout, guest checkout offered, payment methods matched to market (Apple Pay, Shop Pay, local wallets), cart abandonment recovery wired up.
• Imagery: hero shot in-context, alternate angles, scale reference, video for high-consideration SKUs.

Score each red/yellow/green. Fix all reds before any other work.

3. Architect the PDP module stack. Decide the order and presence of modules:

• Hero (image + title + price + ATC + trust strip)
• Variant selector
• Short benefit bullets (3-5)
• Lifestyle / problem-solution block
• Spec / fit / sizing block
• Reviews (with photos, sortable)
• FAQ (questions tied to real CS tickets)
• Comparison table (if category is comparison-driven)
• Cross-sell / bundle block

Strip modules that do not earn a measurable lift. Every block must answer a buyer question.

4. Set the collection and navigation structure. Collections map to how the buyer shops (by use-case, by problem, by price tier), not how you organize inventory internally. Navigation depth: two clicks to any product. Search bar visible on mobile; site search results must be tunable.

5. Define the measurement loop. Per-SKU: PDP conversion rate, add-to-cart rate, cart-to-checkout rate, return rate, review velocity. Site-wide: revenue per session, AOV, repeat-purchase rate. Hand the tracking spec to whoever owns analytics infrastructure.

Decision rules

• Three numbers or no design. Conversion rate, AOV, traffic source. Never start without them.
• Mobile-first, no exceptions. 70%+ of DTC traffic is mobile. Design mobile, sanity-check desktop.
• One promise per page. A PDP that tries to convert three different buyer personas converts none. Pick the dominant buyer; build for them.
• Reviews are infrastructure, not garnish. Below 20 reviews, social proof is fragile. Above 100, it is a moat. Wire review-request emails before launch day, not after.
• Speed is conversion. A 1-second mobile LCP improvement typically lifts conversion 5-15%. Spend the engineering budget here before redesigning anything visual.

Anti-patterns

• Redesigning the PDP because the team is bored of looking at it. The buyer has never seen it.
• Hero video that auto-plays with sound — bounces buyers on mobile.
• "Hero carousels" that nobody clicks past slide one. Pick one promise.
• Stacking apps that each add 200ms of load time until the page is a slideshow.
• Building collections that mirror your warehouse instead of the buyer's mental model.
• Hiding shipping cost until step three of checkout. The buyer will leave when they find it.
• Treating PDP copy as "set and forget." Real CS tickets and search queries change quarterly — refresh the FAQ and bullets against them.

Before / after

Brief: "Our Shopify store is converting badly — redesign it."

Before (blind redesign):

Mock up a new homepage with a video hero and a cleaner product grid.

After (numbers-first, traffic-source-aware, 2026-05-16):

Step one: pull conversion (2.1%), AOV ($68), dominant source (Meta paid = 64%). Step two: audit fundamentals — mobile LCP 4.1s (red), no shipping estimator above fold (red), reviews below fold on mobile (yellow). Step three: with Meta-paid dominant, the PDP is the landing page — rebuild hero to continue ad creative within first scroll, move reviews above fold, fix LCP via image compression and app audit. Measure: PDP conversion at 7 / 14 / 30 days; target +25% within 30 days from speed and trust placement.