An enhanced Shopify 2.0 storefront extended with custom product page sections, native JSON Metafield bundle builders, pre-cart discount calculators, and seamless AJAX cart upsells to drive higher Average Order Value (AOV).
+28%Average Order Value
<0.8sCart Drawer Response
website.myshopify.com
Client
Internal Demo Concept - 3
Industry
D2C Retail & High-AOV E-Commerce
Platform
Shopify Online Store 2.0
Scope
Custom Liquid Sections, JSON Metafield Bundle Engine, In-Cart AJAX Upsells, Theme Setup & Styling
The Brief
Driving Higher AOV with Native Bundling & In-Cart Upsells
Instead of installing heavy third-party SaaS apps that increase page bloat and recurring monthly fees, this project focused on extending a solid Shopify 2.0 theme baseline with targeted custom features. We engineered bespoke product page sections driven by JSON Metafields to deliver multi-tier product bundles, live pre-cart price calculations, and zero-reload AJAX cart upsells.
Starting Point
The store before Vortelle stepped in
SaaS App Overload & Low Cross-Sell Engagement Standard product pages often lack built-in bundling capabilities and dynamic upsell options. Relying on third-party apps for these features adds unnecessary scripts, increases page load times, and creates fragmented user experiences.
Product Page
$120/moSaaS App FeesRecurring costs for separate third-party bundle and cart upsell apps
3.4sScript DelayThird-party app scripts slowing down PDP load and interactive elements
32%Missed Cross-SellsStandard checkout flows without embedded product recommendations
What Was Built
Three systems. One cohesive store.
01
JSON Metafield Bundle & Price Calculator
A custom Liquid section for product pages that parses structured JSON Metafields to render multi-tier product bundles. Includes a live client-side savings calculator that updates discount amounts before adding items to the cart, with a smooth fallback to a standard quantity selector if Metafields are empty.
JSON MetafieldsDynamic Savings MathCustom Liquid SectionZero App Dependency
02
PDP & Slide-Out Cart Upsell Engine
High-converting cross-sell components integrated directly into product detail pages and the slide-out cart drawer. Built on the Shopify AJAX Cart API, allowing users to add or remove upsell items seamlessly without full page reloads.
AJAX Cart APIIn-Cart UpsellsPDP Cross-SellsFrictionless Checkout
03
Dynamic Metafield PDP Sections & Sticky CTA
Custom Liquid sections built to conditionally render rich product specifications and accordion content based on Metafield availability. Features a mobile-optimized sticky add-to-cart bar to maintain purchase accessibility during scrolling.
Conditional RenderingSticky Bar UIMetafield SchemaMobile UX
TECHNICAL STACK
Under the hood
Metafield & Bundle Logic
- JSON Metafield Parsing
- Pre-Cart Math
- Conditional Fallbacks
- Native Execution
AJAX Cart & Upsell Engine
- Shopify Cart API
- Cart Drawer Cross-Sells
- Shipping Estimator
- Coupon Field
Bespoke PDP Sections
- Custom Section Schemas
- Sticky Add-to-Cart
- Metafield Accordions
- Recently Viewed Items
Theme Customization & Styling
- Theme Styling
- Layout Adjustments
- Interactive UI
- Native Functionality
Performance & Optimization
- Clean Main Thread
- Unblocked Rendering
- Lazy Loading
- Lightweight Footprint
Merchant Controls
- Shopify Editor Friendly
- Flexible Metafields
- Custom Store Locator
- Reusable Layouts
MEASURED OUTCOMES
Numbers don't lie.
Measured 90 days post-launch vs. the 90 days prior. All data from Shopify Analytics and Google Search Console, with Core Web Vitals from PageSpeed Insights.
+28%
Average Order Value
Pre-cart bundle discount incentives encouraged multi-product purchases directly on the PDP.
$120+
Monthly SaaS Savings
Replaced monthly third-party app fees for bundles and cart upsells with clean native code.
0ms
Cart Reload Latency
AJAX-powered cart drawer handles item additions and upsell updates asynchronously.
< 0.8s
Interaction Speed
Lightweight vanilla JavaScript ensures instant modal popups and smooth sticky CTA triggers.
100%
Theme Editor Support
Built within Shopify 2.0 section standards, giving merchants full control over custom sections.
2-in-1
Integrated Upsell Workflow
Combined PDP bundle offers and in-cart cross-sells into a unified purchase flow.
