Making Every Price Add Up on Corridge's Product Pages
Corridge sells collagen and superfood powders that customers use every day, which means most of them choose between bundle sizes and between buying once or subscribing.
That choice happens on the product page, where a bundle app, a subscription app and the theme all want to show a price. When they disagree, shoppers see one number on the page and a different one in the cart. Our job was to make every number on the page tell the same story.
One Selection, Every Price in Sync
Pick a bundle and a purchase option, and the page calculates one total from them. Everything else follows from that total: the headline price, the compare-at price, the savings badge, the price per kilo and the price per day.
Because the bundle app redraws its own interface, our script listens for clicks, changes and DOM updates, so the prices stay correct even after the app re-renders.
All money math happens in whole cents and is only formatted at the end. That avoids rounding drift when multiplying quantities or working out discounts.
Subscriptions that show the real total
The most visible bug was simple to describe: a six-unit subscription card showed the price of a single unit. Shoppers were being shown a sixth of what they'd pay.
- Subscription cards now multiply the subscription unit price by the bundle quantity.
- One-time offers stay fully under the bundle app's control, so we never show stale prices from before a re-render.
- Savings are calculated from the actual selected total and its reference price, not shown as a fixed percentage.
Checked against the real cart
Matching numbers on the page isn't enough if the cart disagrees. We ran automated browser tests that added each quantity and subscription combination to a real Shopify cart, each in its own isolated session, and compared the cart total with the page. Every combination matched.
Links that open the right bundle
Bundle choices are saved in the URL, so a link like ?qty=3x opens the product page with the three-pack already selected. This makes it easy to link a specific offer from emails or ads, and the browser's back button still works as expected.
Product Information That's Easy to Scan
Supplement shoppers read before they buy, so we made the details easier to scan and easier for the Corridge team to manage.
- Short product teasers became clean bullet lists the team edits in Shopify.
- A dedicated ingredients accordion shows each product's ingredients. Bundles list the ingredients for every product they contain.
- Empty content blocks no longer leave gaps in the layout.
- The team can hide specific badges or tabs on selected products straight from the theme editor.
- Product badges got their own icon set, kept separate from the homepage.
A newsletter offer that rewards bigger baskets
Instead of a single sign-up discount, the footer lets subscribers pick their offer: 5% on any order, 10% from €60 or 15% from €100. The choice is saved to their Klaviyo profile along with their marketing consent.
The same form powers the standalone newsletter section, with a separate signup source so the team can tell the two apart. While a sign-up is sending, the form locks to prevent double submissions and shows accessible success or error messages.
What we took away
- Pick one source of truth for price. Every other number on the page should be calculated from it.
- Do money math in cents. Format only at the very end.
- Test against the cart, not the page. The cart total is what the shopper actually pays.
See the full Corridge case study for the redesign behind these product pages.
