Shopify Plus store development for a premium beauty brand

Overview

When the client first approached Web6, they were already on Shopify Plus — but the storefront did not behave like a Plus merchant. Checkout relied on deprecated script injections. Promotions were split between three discount apps and manual line-item edits. The theme had been patched by multiple agencies over four years, and every seasonal campaign required developer tickets. Marketing wanted editorial storytelling, ingredient transparency, and routine-based product discovery; operations needed predictable discount behavior and clean order data for their ERP.

We scoped an 18-week engagement to rebuild the customer-facing experience without a risky “big bang” replatform. The north star was simple: own the critical paths — PDP, cart, checkout, and post-purchase messaging — with first-party Shopify primitives instead of app sprawl. That meant a new Liquid theme backed by metaobjects, checkout UI extensions for the fields and disclosures beauty shoppers expect, and Shopify Functions to encode promotion rules that previously lived in fragile JavaScript.

The brand serves India, the United States, and the United Kingdom from a single Plus store with Markets configured for currency and catalog differences. B2B was a secondary thread: a small wholesale program for salon partners would eventually use company accounts, but D2C launch took priority. We documented that sequencing explicitly so sales teams would not promise portal features on day one.

This case study walks through why Plus was retained (not upsold), how checkout extensibility replaced Script Editor patterns, how Functions reduced app dependency, and how we ran launch week with Cloudflare caching rules, Flow automations, and a war room checklist. For broader context on our Shopify practice, see our Shopify development and ecommerce website development services.

Engagements like this are delivered through Web6 enterprise Shopify development .

Challenges

The legacy theme scored poorly on mobile Core Web Vitals despite aggressive image compression. Root cause was not file size alone — it was render-blocking app embeds, synchronous Liquid loops over large collections, and a homepage that loaded every section on every viewport. Merchandising had added “temporary” sections that became permanent, and removing them risked breaking campaigns tied to hard-coded handles.

Checkout was the highest-friction surface. Script-based upsells conflicted with Shop Pay. A third-party field app collected regulatory acknowledgments inconsistently between accelerated and standard checkout. Gift-with-purchase logic failed silently when carts mixed subscription and one-time lines. Customer support reported duplicate charges on edge cases we traced to overlapping automatic discounts — exactly the class of bug Shopify Functions is meant to eliminate when rules are composed explicitly.

Content modeling was another pain point. Ingredient glossaries, dermatologist quotes, and routine steps lived in page builder blocks with no reusable schema. Translating a product story for the UK market meant copying pages by hand. The marketing head described their CMS as “Google Docs pasted into Shopify.” They needed structured content with guardrails, not more WYSIWYG freedom.

Organizational constraints mattered as much as technical debt. Legal required FDA-style disclaimers on specific SKUs. Finance needed promotion redemptions to reconcile with their ERP discount codes. A parallel agency managed paid media and had frozen creative assets tied to old URL structures. Any rebuild had to preserve SEO equity, avoid campaign downtime during peak season, and give non-technical stakeholders preview environments that matched production checkout behavior.

• ✓ Deprecated checkout scripts and conflicting upsell apps
• ✓ Overlapping discount apps causing unpredictable cart totals
• ✓ Unstructured content blocking international merchandising
• ✓ Mobile performance regressions from app embeds and Liquid anti-patterns
• ✓ Cross-functional sign-off requirements from legal, finance, and marketing

Goals

Primary goal: launch a maintainable Shopify Plus storefront where marketing can compose campaigns from metaobjects and theme sections without opening tickets for every hero swap. Checkout must present trust signals, regulatory copy, and delivery expectations through supported extensions — not injected scripts.

Secondary goals included migrating promotion logic into Shopify Functions with parity tests against legacy behavior, improving mobile LCP and INP on PDP and collection templates, and establishing Flow automations for post-purchase sample fulfillment. B2B company accounts would receive a lightweight catalog experience after D2C stabilised.

We also set explicit non-goals: no headless rewrite in phase one, no net-new subscription engine (existing subscription app retained), and no vanity KPI promises. Success would be measured by launch readiness, checkout stability, performance budgets met on real devices, and stakeholder sign-off — not fabricated revenue lift percentages.

Discovery and research

Weeks 1–3 were discovery-heavy. We audited the existing theme, app stack, and checkout profile, exporting representative orders to understand discount combinations that actually occurred in production — not just what merchandising intended. Heatmaps and session replays from the client’s analytics confirmed PDP drop-off correlated with below-the-fold ingredient content and slow variant switching.

Stakeholder interviews mapped jobs-to-be-done: marketing needed routine builders and influencer landing pages; compliance needed per-SKU disclaimers; operations needed reliable GWPs and sample caps; engineering needed fewer app webhooks. We compared Hydrogen against a metaobject-rich Liquid theme for editorial storytelling. Hydrogen offered component reuse and edge rendering, but the team’s day-to-day workflow was Shopify Admin–centric, and adding a Node storefront would split preview and permissions. We documented the decision to defer headless and revisit if content velocity outgrew metaobjects.

Competitive teardown focused on premium beauty peers in the US and UK — not to clone layouts, but to benchmark checkout trust patterns, subscription disclosure placement, and how brands surface clinical claims without cluttering ATC zones. We translated those patterns into a component library spec tied to Online Store 2.0 section schemas.

Technical spike work validated Functions for three promotion types: tiered GWPs, bundle discounts, and subscription-first order incentives. We built parity spreadsheets comparing legacy app output vs Function output on two hundred synthetic carts. Discrepancies were classified as “fix before launch” or “acceptable behavioral change” with client approval.

Architecture

The storefront architecture centers on a custom Online Store 2.0 theme with a disciplined section library: hero, routine carousel, ingredient accordion, comparison table, UGC strip, and sticky PDP buy box. Metaobjects model ingredients, routines, experts, and campaign modules. Product metafields reference those objects, so updating an ingredient description propagates wherever it appears. This replaced dozens of duplicate page sections.

Checkout Extensibility splits responsibilities cleanly. UI extensions render trust badges, shipping disclaimers for hazmat-adjacent SKUs, and sample opt-in checkboxes. Shopify Functions enforce discount logic server-side at checkout computation time — no client-side race conditions. We removed legacy scripts from checkout entirely once extensions passed Shopify’s checker and the client’s legal review.

Cloudflare sits in front of the primary domain for static asset caching, tiered cache rules for image CDN paths, and bot management during launch. Origin remains Shopify; we avoided caching HTML at the edge to prevent stale cart states. Flow handles operational glue: tag orders with sample SKUs, notify the 3PL when hazmat lines appear, and pause automations during cutover windows.

For B2B, we scaffolded company locations and price lists without enabling self-serve registration at launch. Salon partners continue using draft orders until phase two exposes a password-protected catalog template with net terms displayed via UI extension — a pattern we have reused in B2B ecommerce engagements.

• ✓ Metaobject graph for ingredients, routines, campaigns, and experts
• ✓ Theme section library with schema-driven presets for marketing self-service
• ✓ Checkout UI extensions for compliance, trust, and sample opt-in
• ✓ Shopify Functions module for GWPs, bundles, and subscription incentives
• ✓ Cloudflare caching and bot rules; Flow for fulfillment tagging

UX and merchandising

Beauty ecommerce UX lives or dies on clarity near the buy box. We redesigned PDP hierarchy: product name, shade/size selector, price, subscription toggle, ATC, then trust row (dermatologist-tested, cruelty-free, returns window). Ingredient and “how to use” content sits in tabs with deep links for SEO. Shade selection uses swatches backed by metafields rather than variant titles alone, reducing mis-picks that drive support load.

Routine-based discovery was a differentiator the client wanted to protect. We built a “Build your routine” flow: quiz-lite questions in a drawer, results rendered from metaobject relationships, and one-click add of a curated set with Function-validated bundle pricing. Marketing can swap questions and result sets without deployments.

Cart and mini-cart surfaces explain promotion progress (“Add ₹X for your free mini”) using Function-exposed messaging keys rather than hard-coded strings. Subscription lines show next charge dates prominently to reduce chargeback confusion — a recurring theme in beauty subscriptions.

Accessibility and international UX received explicit attention. Focus order on modals, sufficient contrast on swatches, and UK English copy variants stored in metaobject fields for Markets. We did not enable every Market on day one; US and UK went live with the theme, with India-specific payment messaging retained from the prior storefront.

Process and delivery

We ran the engagement in four phases: discovery and architecture (weeks 1–4), theme and metaobject build (weeks 5–10), checkout Functions and extensions (weeks 8–13 overlapping), then hardening, migration, and launch (weeks 14–18). Overlap was intentional — checkout work could not wait until the theme finished because promotion parity testing needed real product catalogs.

Fortnightly demos used staging environments with Shopify’s checkout preview links shared to legal and finance. Marketing received Loom walkthroughs for metaobject editing. We maintained a public-facing risk register: open parity gaps, third-party app dependencies, and SEO redirect batches. Transparency prevented launch-week surprises.

Migration strategy favored incremental cutover: new theme on a preview domain, then theme publish with feature flags implemented as section settings (e.g., enable routine builder module per market). Product and metafield imports ran through Matrixify with dry runs; customer-facing URLs were preserved via redirect maps generated from crawl diffs.

Launch week followed a written runbook: freeze window, backup theme export, publish checklist, Cloudflare rule activation, Flow pause/resume, smoke tests on Shop Pay and standard checkout, and rollback criteria (checkout error rate spike, Function deployment failure, or payment gateway mismatch). War room hours aligned IST and US Eastern for the client’s leadership team.

SEO and content

SEO was a launch gate, not a post-launch patch. We preserved URL handles for top organic landing pages, exported legacy meta titles and descriptions, and improved template structure with JSON-LD for Product, BreadcrumbList, and FAQ where appropriate. Ingredient glossary pages became metaobject-powered templates with page connection modules to related products — a pattern our SEO services team reviewed before go-live.

Core Web Vitals improvements support organic performance indirectly. By removing render-blocking apps and refactoring Liquid loops to paginate collection rendering, mobile LCP on PDP moved into a stable sub-2.5s band on throttled tests. We documented measurement methodology (WebPageTest 4G, Shopify preview vs production) so the client could reproduce audits monthly.

Blog and editorial content remain on Shopify’s blog for phase one; the client links educational posts into routine modules via metaobject references. We recommended a content calendar tied to metaobject campaigns rather than one-off pages — aligning with how their marketing team already plans seasonality.

Performance

Performance budgets were set early: mobile LCP under 2.5s on representative PDPs, INP under 200ms on collection filters, CLS under 0.1 on PDP image carousels. We profiled Liquid using Shopify’s theme inspector and eliminated N+1 collection queries on the homepage by replacing “load all collections” patterns with curated metaobject lists.

Images route through Shopify CDN with explicit width parameters in Liquid; hero sections use responsive srcsets and lazy loading below the fold. Third-party scripts were inventory-tagged: essential (analytics, subscription), deferred (UGC embed), removed (redundant chat widget). Cloudflare caches static assets aggressively while bypassing checkout and cart paths.

Checkout performance improved by removing legacy scripts — not by micro-optimizing extensions, which Shopify hosts. Standard and Shop Pay checkouts now load without layout shift from injected banners. The client monitors Real User Metrics via their analytics suite; we provided baseline comparisons pre- and post-launch without claiming revenue attribution.

Security and compliance

Checkout extensibility reduced reliance on arbitrary script tags — shrinking the attack surface and aligning with Shopify’s direction for Plus merchants. Admin access was reviewed: staff accounts received least-privilege roles, and theme edit permissions were separated from customer data export rights.

PII handling for sample programs and regulatory acknowledgments stays within checkout extension fields stored according to Shopify’s data policies. We documented data flows for legal: which fields sync to ERP, which remain Shopify-only, and retention expectations. No custom customer databases were introduced in phase one.

Testing and quality assurance

Promotion parity testing compared legacy vs Function cart totals across two hundred synthetic carts covering edge cases: mixed subscription/one-time, multi-market currencies, excluded SKUs, and stacked codes where allowed. Discrepancies were triaged with finance sign-off before decommissioning old apps.

Checkout QA exercised Shop Pay, standard card flows, PayPal, and market-specific shipping scenarios. UI extensions were tested in checkout editor preview and on physical devices. Accessibility checks included keyboard navigation on routine modals and screen reader labels on shade swatches.

Load testing focused on realistic merchandising operations — bulk price updates, Flash sale collection publishes, and Flow bursts — rather than artificial DDoS simulations. Redirect maps were validated with crawl tools; 404 monitoring ran for thirty days post-launch with weekly reports to marketing.

Outcomes

The storefront launched within the agreed 18-week window after a staged soft launch to email VIPs. Checkout error rates stayed within normal Shopify baselines during the first week; the rollback plan was not invoked. Promotion logic migrated entirely to Functions for the three priority rule types; legacy discount apps were removed without reported reconciliation issues in the first billing cycle.

Mobile LCP on flagship PDPs measured under 2.1s on repeated WebPageTest mobile profiles post-launch — an improvement the client’s performance lead attributed primarily to app embed removal and Liquid refactoring, not cosmetic design changes. Marketing published two seasonal campaigns using metaobject modules without developer support within the first month — an operational win they highlighted internally.

We do not report revenue lift percentages here. Those figures depend on media spend, inventory, and macro conditions outside this project’s scope. What we can state factually: checkout scripts were eliminated, discount apps consolidated, launch checklists completed, and stakeholder sign-offs obtained from legal, finance, and marketing before theme publish.

Lessons learned

Deferring Hydrogen was correct for this team’s maturity and timeline. Metaobjects plus a rigorous section library delivered most editorial flexibility without operationalizing a second deployment pipeline. Headless remains viable if they pursue true omnichannel content APIs later.

Promotion parity testing is non-negotiable when replacing discount apps with Functions. Synthetic carts catch edge cases marketing spreadsheets miss; finance must sign off on intentional behavior changes, not just engineering.

Checkout extensibility rewards early legal involvement. Copy approvals embedded in Admin reduce launch-week fire drills. Treat extensions as product surfaces with versioning, not one-off snippets.

“We stopped fighting the theme every campaign week. Checkout used to be a black box of scripts — now legal can approve copy in Admin, and our team publishes routines from metaobjects without waiting on dev. Launch was boring in the best way: no emergency rollback, no surprise discount bugs.”

Suggested project visuals

• PDP hierarchy prioritizes shade selection, subscription clarity, and ingredient depth below the fold.

  File: shopify-plus-beauty-pdp-routine.webp

  ALT: Premium beauty product page with routine builder and shade selectors on mobile

• Checkout extensibility replaced legacy scripts with Admin-editable compliance and trust modules.

  File: shopify-plus-checkout-extensions.webp

  ALT: Shopify checkout UI extensions showing trust badges and regulatory acknowledgment checkbox

• Metaobjects give marketing structured content without developer tickets each campaign.

  File: shopify-plus-metaobject-admin.webp

  ALT: Shopify Admin metaobject entries for skincare ingredients and routines