Stop building checkout components from scratch. These production-tested components solve common checkout challenges and can be customized for your brand.

Boost Conversions

Proven components that increase order value and reduce abandonment. Copy the code and deploy in minutes.

Real Impact

Each example shows actual performance improvements from businesses using these components.
Problem: Customers don’t know they’re close to free shipping
Free Shipping Progress Bar
import { useCheckoutSession } from '@ollie-shop/sdk';

export default function FreeShippingBar({ threshold = 10000 }) {
  const { cart } = useCheckoutSession();
  
  if (!cart?.items?.length) return null;
  
  const remaining = Math.max(0, threshold - cart.total);
  const progress = Math.min((cart.total / threshold) * 100, 100);
  
  if (remaining === 0) {
    return (
      <div className="p-3 bg-green-50 rounded">
        ✅ You've unlocked free shipping!
      </div>
    );
  }
  
  return (
    <div className="p-4 bg-blue-50 rounded">
      <div className="flex justify-between mb-2">
        <span>Free shipping progress</span>
        <span>${(remaining / 100).toFixed(2)} to go</span>
      </div>
      <div className="w-full bg-gray-200 rounded h-2">
        <div 
          className="bg-blue-600 h-2 rounded"
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  );
}
Results: 32% increase in average order value Best Slot: cart_sidebar or cart_title

​
Quick Component Patterns

​
Payment Confidence

// Show accepted payment methods
import { usePayment } from '@ollie-shop/sdk';

export default function PaymentMethods() {
  const { availableMethods } = usePayment();
  
  return (
    <div className="flex gap-2 p-3 bg-gray-50 rounded">
      <span className="text-sm">We accept:</span>
      {availableMethods.map(method => (
        <img key={method.id} src={method.icon} className="h-6" />
      ))}
    </div>
  );
}

​
Cart Summary Enhancement

// Enhanced cart total display
import { useCheckoutSession } from '@ollie-shop/sdk';

export default function EnhancedTotal() {
  const { cart } = useCheckoutSession();
  const savings = cart.originalTotal - cart.total;
  
  return (
    <div className="p-4 bg-green-50 rounded">
      <div className="text-lg font-bold">
        Total: ${(cart.total / 100).toFixed(2)}
      </div>
      {savings > 0 && (
        <div className="text-sm text-green-600">
          You saved ${(savings / 100).toFixed(2)}!
        </div>
      )}
    </div>
  );
}

​
Mobile-First Alert

// Mobile-optimized alert banner
export default function MobileAlert({ message }) {
  return (
    <div className="md:hidden p-3 bg-blue-50 text-center">
      <span className="text-sm font-medium">{message}</span>
    </div>
  );
}

​
Deployment

Deploy any component instantly: 
# Copy component code to your project
ollieshop component create free-shipping-bar

# Deploy to specific slot
ollieshop component deploy --slot cart_sidebar

​
Next Steps

Components Guide

Learn how components work

Available Slots

See all 84 component slots

SDK Hooks

Available data and actions

Function Examples

Business logic examples
Quick Deploy: All these components work out-of-the-box. Just copy the code, customize your branding, and deploy to your chosen slot.