Case study

One supplement brand. One custom theme, one custom app, two integrations.

Amplified Amino was a US supplement brand on Shopify. Muscled built both sides of the stack: a custom Figma-to-Shopify theme with a dynamic lab-report system that serves Certificates of Analysis for every product from one Liquid template, and a custom embedded Shopify app integrating the dfin third-party payment gateway plus a tiered shipping-protection checkout UI extension. The brand has since been shut down by the client; the technical work is preserved as proof of scope for supplement, nutrition, and medical-supply engagements.

View live store Jump to outcomes
By the numbers

The numbers speak for themselves

Vault-backed numbers. No presentation-grade estimates. Each one is reconcilable to the founder's own reporting.

Theme commits across the Shopify build
841

841 commits on the amplified-new theme repo across ~12 months. Iterative design versions (branches d4 to d7) covered the Figma-to-Shopify conversion, dynamic lab-report system, metafield-powered upsells, and trust and quality branding sections.

SRC: Vault projects/1-shopify-theme.yaml, GitHub muscled-clients/amplified-new, 2026-05-21

Production integrations shipped in the custom app
2

A custom Shopify app delivering two distinct integrations from one Remix codebase: a dfin third-party payment gateway flow with HMAC-verified Shopify webhooks and orderMarkAsPaid via the Admin GraphQL API, and a tiered shipping-protection checkout UI extension that prices protection by cart subtotal.

SRC: Vault projects/2-custom-app.yaml, GitHub Muscled-clients-repo/enhanced_amino, 2026-05-21

Liquid template serving Certificates of Analysis for every product
1

One custom page template (page.product-details.liquid) reads the product handle from the URL, looks the product up via all_products, and renders its Certificate of Analysis image from a custom metafield. New lab reports go live by uploading a metafield image. No new page templates required per product.

SRC: Vault notes.md (theme code-confirmed), 2026-05-21

Amplified Amino monthly revenue

Post-rebuild growth
Desktop & Mobile

The full homepage, shown two ways

Two side-by-side screenshots of the long homepage. Hover the desktop card to slowly scroll the screenshot top to bottom, so visitors see the entire page without leaving this one.

  • Desktop · full homepage after rebuild
    1 + 1
    Custom Shopify theme + custom Shopify app shipped for one client (671 mo)
    /mo at peak
  • Mobile-first after rebuild
    Mobile traffic share
    671 mo
    Engagement length
The work

How the engagement unfolded

  1. Custom Shopify app kickoff — Remix + Node/Express base

    Sep 2024 — Dec 2024

    Started on a custom embedded Shopify app for the supplement brand on the Shopify App Template (Remix) with a Node.js + Express backend and Prisma + PostgreSQL. Initial iteration scoped a WooCommerce-to-Shopify sync layer (OrderMapping / ProductMapping models, productCreate / orderCreate mutations). That direction was dropped mid-project in favor of the dfin payment-gateway flow — the WooCommerce code remains in the codebase commented out as a documented pivot.

    • Remix v2
    • Node.js + Express 4
    • Prisma 4 + PostgreSQL
    • Shopify App Template
    • Heroku Docker deploy
    • WooCommerce iteration scoped then dropped

  2. Shopify theme build — Figma-to-storefront conversion

    Dec 2024 — ongoing through 2025

    Custom theme built from Figma on a separate repo (amplified-new). Reusable Liquid sections and blocks for modular, admin-editable control. Custom product and collection pages with filters and breadcrumbs. The dynamic lab-report (COA) system shipped here: one custom page.product-details.liquid template reads the product handle from the URL and renders the matching Certificate of Analysis image from a product- or variant-level metafield. Trust and quality branding sections (choose-us, quality-verify, comparison, before/after, countdown timer), metafield-powered upsells, content pages (About, Story, Team, Lookbook, FAQ, Quality Control, Contact), and a dedicated product template for the shipping-protection product (handoff to the custom app).

    • Figma-to-Shopify conversion
    • Dynamic COA template
    • Metafield-powered upsells
    • Reusable Liquid sections
    • Shogun + BSS Commerce integrations
    • Trust & quality branding sections
    • 841 theme commits

  3. Custom app pivot — dfin payment gateway + tiered checkout extension

    Jan 2025 — May 2025

    Custom app refocused on two production deliverables. First, integration with the dfin third-party payment gateway: app sends order details (customer, addresses, total, metadata) to dfin, customer pays through a hosted link delivered via Omnisend, and a dfin webhook callback marks the Shopify order paid via the orderMarkAsPaid Admin GraphQL mutation. PaymentMapping table tracks per-order pending/cancel/paid state. Second, a tiered shipping-protection checkout UI extension on @shopify/ui-extensions-react/checkout (purchase.checkout.block.render target): the extension reads cart lines, computes subtotal, and adds the correct one of four protection-product variants ($1.50 / $2.50 / $3.50 / $4.50) automatically. A switch lets the shopper opt out; if the cart edits to a different tier, the stale variant is removed and the correct one is added.

    • dfin gateway integration
    • orderMarkAsPaid mutation
    • HMAC-verified Shopify webhooks
    • Tiered shipping-protection checkout UI extension
    • useCartLines + useApplyCartLinesChange
    • Omnisend payment-link delivery

  4. Final polish, email migration, theme iteration, then brand wind-down

    May 2025 — Dec 2025

    Customer-facing email moved from Nodemailer SMTP to Omnisend for the payment-link flow. Internal late-payment notifications kept on Nodemailer. Theme iteration continued on the amplified-new repo through end of 2025 (last commit Dec 17, 2025). The Amplified Amino brand was subsequently shut down by the client; the work shipped remains the technical proof point for supplement, nutrition, and medical-supply engagements.

    • Nodemailer → Omnisend migration
    • Late-payment internal alerts
    • Theme iteration through Dec 2025
    • Brand wind-down by client
Project overview

What we built

Amplified Amino was a US direct-to-consumer supplement brand selling amino-acid products. The Figma case study categorized them under Medical Supplies; their app infrastructure used the amplifiedamino.us domain for internal mail. The brand has since been shut down by the client. The engagement is preserved here as a technical proof point.

Muscled delivered two parallel builds for one client: a custom Shopify theme (Figma-to-Shopify conversion with a dynamic Certificate-of-Analysis system) and a custom embedded Shopify app (dfin payment gateway + tiered shipping-protection checkout UI extension). The two repos meet at the checkout: the theme ships a dedicated product template for the shipping-protection product that the custom app's checkout extension manipulates per cart subtotal.

In their own words

(Testimonial TBD. Vault contact_name is open; the Amplified Amino brand has since been shut down by the client, so the case study presents the technical work delivered.)

Amplified Amino was a US direct-to-consumer supplement brand selling amino-acid products (categorized as Medical Supplies in the original Figma case study). Storefront ran at amplifiedamino.com; the custom app's internal email used info@amplifiedamino.us. The brand was also seen under the 'Enhanced Amino' name (the app repo) and the 'Evolutionist Lab Results' branding inside the Figma file. The brand was shut down by the client; the engagement spanned Sep 2024 to Dec 2025 across one Shopify theme and one custom Shopify app.

Amplified Amino teamSupplement brand operator (engagement ran 2024-2025)
The challenge

What was holding them back?

A supplement brand has to show a Certificate of Analysis per product without one developer ticket per SKU. They needed a third-party payment gateway routed cleanly through Shopify order state. They needed shipping protection priced by cart subtotal rather than a flat fee. And they needed a Figma-quality theme that the in-house team could edit without code.

  1. 01

    Lab reports needed per product without one template per SKU

    A supplement brand selling amino-acid products has to surface a Certificate of Analysis (COA) per product for trust and compliance. Building a dedicated page template per SKU would not scale: every new product would need developer time, and every lab-report refresh would be a code change. The team needed a single template that resolved the correct COA from product context.

  2. 02

    Third-party payment gateway needed inside the Shopify order flow

    The brand needed to route orders through dfin, a third-party hosted payment link gateway, while keeping Shopify as the order system of record. That required an embedded app that could read order context, hand off to dfin, receive a callback when the customer paid, and mark the Shopify order paid through the Admin API. Webhooks from Shopify on cancellation also had to update payment-mapping state so late dfin payments triggered the right internal email.

  3. 03

    Shipping protection had to price by cart, not flat-fee, inside Checkout

    Flat-fee shipping protection under-charges large carts and over-charges small ones. The brand needed a tiered protection product priced by cart subtotal, presented as an opt-out toggle inside Shopify Checkout. That meant building a Checkout UI Extension that watches the cart, recomputes the correct tier in real time, and adds or removes the matching protection-product variant without breaking checkout.

  4. 04

    Figma designs had to land as a maintainable Shopify theme, not a one-shot build

    Figma-to-Shopify conversions often produce pixel-perfect themes that the in-house team can not edit after launch. The brand needed homepage and PDP that hit the Figma fidelity, plus reusable, admin-editable Liquid sections so content (banners, upsells, trust blocks, lab reports, blog posts) could move without developer involvement.

Before / After

Before and after

Before

After

Funnel collapse: we removed a full page from the path to purchase.

Solutions

What we built to fix it

Each fix maps to a specific lift in the funnel.

  • Dynamic COA / lab-report system — one Liquid template, every SKU

    Built a custom page.product-details.liquid template that reads the product handle from the URL, looks the product up via all_products, and renders its Certificate of Analysis image from a custom product- or variant-level metafield. A coa_button.liquid snippet renders the View Lab Report CTA only when the matching metafield image is set, so unfinished products do not show a broken button. New lab reports go live by uploading a metafield image — zero new page templates, zero developer time per product.

  • Custom Shopify app integrating the dfin payment gateway end-to-end

    Built an embedded Shopify app on Remix + Node/Express + Prisma. The dfin pay flow is triggered from the admin: the app fetches order details via the GetOrderDetails Admin GraphQL query, posts the customer and total to dfin as multipart/form-data, stores a PaymentMapping row tracking pending state, and dispatches the hosted payment link to the customer through an Omnisend transactional event. The dfin callback (/api/webhook/dfinin) verifies a shared bearer secret, parses the metadata, and runs the orderMarkAsPaid mutation to flip the Shopify order to paid. Shopify webhooks (orders/cancelled, app/uninstalled) are HMAC-SHA256 verified with timingSafeEqual against the raw request body.

  • Tiered shipping-protection checkout UI extension

    Shipped a Shopify Checkout UI Extension at the purchase.checkout.block.render target (API 2024-10). useCartLines watches the cart, useApplyCartLinesChange writes the protection product in or out. Four tiers — $1.50 under $60, $2.50 under $120, $3.50 under $180, $4.50 above — map to four pre-built Shipping Protection product variants. When the shopper edits the cart and the subtotal crosses a tier boundary, the stale variant is removed and the correct one added in the same render pass. A Switch toggle lets the shopper opt out; defaults to opted-in.

  • Figma-to-Shopify theme conversion built on reusable, admin-editable sections

    Converted the Figma designs into a custom Shopify theme on the amplified-new repo. Reusable Liquid sections and blocks for the homepage and PDP, custom collection pages with filters and breadcrumbs, trust and quality branding sections (choose-us, quality-verify, comparison, before/after, countdown timer), and metafield-powered upsells via an upsell-product.liquid snippet pulling from the theme.upsell metafield. Content pages (About, Story, Team, Lookbook, FAQ, Quality Control, Contact) plus a dedicated product template wired to the shipping-protection product the custom app sells through Checkout.

The stack

What it was built on

Tools picked for the job, not for the resume.

  • Shopify
    Platform
  • Liquid + custom sections
    Templating
  • Remix v2 (Shopify App Template)
    App framework
  • Node.js + Express 4
    Backend
  • Prisma 4 + PostgreSQL
    Data layer
  • dfin payment gateway
    Payments
  • Shopify Checkout UI Extensions (React)
    Checkout
  • Omnisend + Nodemailer
    Email
How we engineer performance

Speed is a revenue lever, not a vanity score

Every Muscled build is engineered to the same standard. The numbers below are the published industry benchmarks we design against, not stand-ins for any one client's figures.

conversions per 0.1s of load-time improvement on ecommerce sites.

+8.4%

SRC: DELOITTE / GOOGLE

conversion rate for stores loading under 2s, vs the ~1.4% Shopify average.

2.4%

SRC: SHOPIFY PERFORMANCE DATA

conversion lift per 1s of mobile load-time gained, where 90% of traffic lives.

+10-20%

SRC: SHOPIFY MOBILE BENCHMARKS

// OUR PERFORMANCE GATE we don't ship unless field Core Web Vitals hold: LCP ≤ 2.5s · INP ≤ 200ms · CLS < 0.1 (p75, mobile)

Capability surface

The techniques behind a build like this

Dynamic content & lab reports

  • Dynamic COA template
  • URL handle → product lookup
  • Metafield-driven lab reports
  • page.product-details.liquid
  • all_products lookup
  • Product- and variant-level metafields
  • coa_button.liquid conditional render
  • Zero-new-templates scaling
  • Metafield-only content updates
  • Lab report image upload workflow

Custom Shopify app — dfin payment gateway

  • dfin gateway integration
  • orderMarkAsPaid mutation
  • HMAC-verified Shopify webhooks
  • Remix v2 + Express 4
  • Shopify App Template
  • Prisma 4 + PostgreSQL
  • PaymentMapping state machine
  • GetOrderDetails Admin GraphQL
  • Bearer-token dfin webhook verify
  • timingSafeEqual HMAC compare
  • Raw body bodyParser.raw
  • Heroku Docker deploy
  • OAuth scopes: read/write orders + products

Tiered shipping-protection checkout extension

  • purchase.checkout.block.render
  • Four-tier subtotal pricing
  • Auto add / remove variant on cart change
  • @shopify/ui-extensions-react/checkout
  • API 2024-10
  • useCartLines + useApplyCartLinesChange
  • $1.50 / $2.50 / $3.50 / $4.50 tiers
  • Subtotal recompute on cart edit
  • Switch opt-out toggle
  • Stale-tier variant cleanup
  • T&Cs modal link

Theme breadth — sections, content, integrations

  • Figma-to-Shopify conversion
  • Reusable admin-editable sections
  • Metafield-powered upsells
  • Homepage + PDP redesign
  • Custom collection pages with filters
  • Breadcrumb navigation
  • Trust & quality sections (choose-us, quality-verify, comparison)
  • Before/after section
  • Countdown timer section
  • About / Story / Team / Lookbook / FAQ / Quality Control / Contact
  • Shipping-protection product template (ties to app)
  • Shogun page builder
  • BSS Commerce content/login app
  • Omnisend customer-facing email
  • Nodemailer internal alerts
Storefronts

One build. Multiple markets.

Same theme code across markets, with localized pricing, currency, and region-specific content routed automatically.

  • United States

    Storefront at engagement (brand later shut down by client)
    • Custom Shopify theme
    • Figma-to-Shopify conversion
    • Dynamic COA / lab-report template
    • Metafield-powered upsells
    • Custom embedded Shopify app
    • dfin gateway integration
    • Tiered shipping-protection checkout extension
    • Omnisend payment-link delivery
    United States screenshot
    Served from the same Shopify Markets build. Dedicated capture not included.
Full build · sections

Every section, built mobile-first

The full build is many numbered sections, each designed for the phone first. The rail below shows a sample. Scroll horizontally to step through.

The results

What the work delivered

Each number is reconcilable to the founder's own reporting.

Theme commits across the Shopify build
841

841 commits on the amplified-new theme repo across ~12 months. Iterative design versions (branches d4 to d7) covered the Figma-to-Shopify conversion, dynamic lab-report system, metafield-powered upsells, and trust and quality branding sections.

SRC: Vault projects/1-shopify-theme.yaml, GitHub muscled-clients/amplified-new, 2026-05-21

Production integrations shipped in the custom app
2

A custom Shopify app delivering two distinct integrations from one Remix codebase: a dfin third-party payment gateway flow with HMAC-verified Shopify webhooks and orderMarkAsPaid via the Admin GraphQL API, and a tiered shipping-protection checkout UI extension that prices protection by cart subtotal.

SRC: Vault projects/2-custom-app.yaml, GitHub Muscled-clients-repo/enhanced_amino, 2026-05-21

Liquid template serving Certificates of Analysis for every product
1

One custom page template (page.product-details.liquid) reads the product handle from the URL, looks the product up via all_products, and renders its Certificate of Analysis image from a custom metafield. New lab reports go live by uploading a metafield image. No new page templates required per product.

SRC: Vault notes.md (theme code-confirmed), 2026-05-21

Ready to ship yours?

Let's talk about what you want to ship.

One supplement brand, two production deliverables. A custom Shopify theme with a dynamic Certificate-of-Analysis system that scales to every SKU through a single Liquid template, and a custom embedded Shopify app integrating a third-party payment gateway end-to-end plus a tiered shipping-protection checkout extension. 841 theme commits and 84 app commits across roughly fifteen months. The Amplified Amino brand was subsequently shut down by the client; the engineering work is the proof point for supplement, nutrition, and medical-supply prospects who need lab reports, custom payment routing, or checkout extensions.

Book a free store audit View all case studies
30 minutes. No deck.