Skip the setup complexity. Go from zero to deployed component in 5 minutes with a real checkout enhancement that drives results.

5-Minute Deploy

Install CLI, create component, deploy, see results. No complex setup.

Real Business Impact

Build a cart upsell widget that typically increases order value 15-25%

​
Quick Setup

npm install -g @ollie-shop/cli && ollieshop login

​
Create Component

ollieshop component create cart-upsell && cd cart-upsell

​
Build Your Component

Replace the default component with this cart upsell widget:
src/index.tsx
import { useCheckoutSession } from '@ollie-shop/sdk';

export default function CartUpsell() {
  const { cart, addToCart } = useCheckoutSession();
  
  // Smart upsell: if cart has tops, show matching bottoms
  const upsellProduct = cart.items.some(item => item.category === 'tops') 
    ? { id: 'jeans-001', name: 'Classic Jeans', price: 7900 }
    : { id: 'tshirt-001', name: 'Basic Tee', price: 2900 };

  return (
    <div className="p-4 border rounded-lg bg-blue-50">
      <h3 className="font-semibold mb-2">Complete Your Look</h3>
      <div className="flex items-center gap-3">
        <div className="flex-1">
          <p className="font-medium">{upsellProduct.name}</p>
          <p className="text-lg">${(upsellProduct.price / 100).toFixed(2)}</p>
        </div>
        <button 
          onClick={() => addToCart(upsellProduct)}
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
}

​
Test Locally

npm run dev
Opens preview at http://localhost:3000 - test different cart scenarios instantly.

​
Deploy Live

npm run build && ollieshop component deploy --slot cart_sidebar

​
✅ Done!

Visit your checkout URL - your upsell widget is now live in the cart sidebar.

What You Built

A smart upsell component that shows relevant products based on cart contents

Business Impact

This type of widget typically increases average order value by 15-25%

​
Next Steps

More Components

Browse production-ready component examples

Add Business Logic

Create serverless functions for validation and processing

A/B Test Versions

Create different versions to test conversion rates