​
Overview

This guide walks through building a free shipping progress bar component. You’ll learn how to:
  • Set up a component project
  • Access checkout data
  • Handle user interactions
  • Deploy to production

​
Prerequisites

  • Ollie Shop CLI installed
  • Basic React knowledge
  • Access to a test store

​
Create the Component

1

Initialize Component

ollieshop component create --name free-shipping-bar --slot header
cd free-shipping-bar
2

Install Dependencies

npm install
3

Review Structure

free-shipping-bar/
├── src/
│   ├── index.tsx      # Component code
│   └── styles.css     # Styles
├── package.json       # Dependencies
└── meta.json         # Component metadata

​
Build the Component

Replace src/index.tsx: 
import React from 'react';
import { useCheckoutSession } from '@ollie-shop/sdk';
import './styles.css';

export default function FreeShippingBar() {
  const { cart } = useCheckoutSession();
  const threshold = 10000; // $100 in cents
  const remaining = threshold - cart.total;
  const progress = Math.min((cart.total / threshold) * 100, 100);
  
  if (remaining <= 0) {
    return (
      <div className="shipping-bar success">
        <span>✓ Free shipping unlocked</span>
      </div>
    );
  }
  
  return (
    <div className="shipping-bar">
      <p>Add ${(remaining / 100).toFixed(2)} for free shipping</p>
      <div className="progress-track">
        <div 
          className="progress-fill" 
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  );
}

​
Add Styles

Create src/styles.css: 
.shipping-bar {
  background: #f3f4f6;
  padding: 12px;
  text-align: center;
  font-size: 14px;
}

.shipping-bar.success {
  background: #10b981;
  color: white;
}

.progress-track {
  background: #e5e7eb;
  height: 6px;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  background: #3b82f6;
  height: 100%;
  transition: width 0.3s ease;
}

​
Test Locally

npm run dev
This opens a preview with:
  • Live component preview
  • Mock cart data controls
  • Mobile/desktop views

​
Deploy

1

Build

npm run build
2

Deploy

ollieshop component deploy
3

Verify

ollieshop component list

​
Using Checkout Data

The SDK provides hooks for accessing checkout data: 
const { cart } = useCheckoutSession();

// Available properties
cart.items      // Array of cart items
cart.total      // Total in cents
cart.subtotal   // Subtotal before shipping/tax
cart.shipping   // Shipping cost
cart.tax        // Tax amount

​
Adding Interactivity

Components can modify the checkout: 
const { addToCart, removeFromCart } = useCheckoutSession();

// Add item
await addToCart({
  id: 'product-123',
  quantity: 1
});

// Remove item
await removeFromCart('product-123');

​
Best Practices

​
Performance

// Memoize expensive calculations
const totalSavings = useMemo(() => {
  return cart.items.reduce((sum, item) => sum + item.discount, 0);
}, [cart.items]);

​
Error Handling

const [error, setError] = useState(null);

try {
  await addToCart(item);
} catch (err) {
  setError('Failed to add item');
}

​
Accessibility

<div role="status" aria-live="polite">
  {remaining > 0 
    ? `${(remaining / 100).toFixed(2)} dollars until free shipping`
    : 'Free shipping unlocked'
  }
</div>

​
Next Steps

Component Examples

More component patterns

API Reference

Complete SDK documentation