Skip to main content
Ollie Shop works with Templates, which is nothing but a pre-defined set of slots. In each Slot goes a Component. This way you can change compoennts wihtout having to worry about re-buidling your checkout.
Take a look at our onboarding tutorial and learn how create and deploy a custom component

​
Component Architecture

Components follow a simple pattern:
index.tsx
import { useCheckoutSession, useStoreInfo } from '@ollie-shop/sdk';

export default function MyComponent() {
  // Access live checkout data
  const { cart, customer } = useCheckoutSession();
  const { theme } = useStoreInfo();
  
  return (
    <div style={{ color: theme.colors.primary }}>
      <h3>Welcome {customer.firstName}!</h3>
      <p>Cart total: ${(cart.total / 100).toFixed(2)}</p>
    </div>
  );
}

​
Creating Components

Components are created through the admin dashboard:
Component creation form showing name, active toggle, slot selection, and version selection
  1. Name - Descriptive component name
  2. Slot - Where the component will appear
  3. Version - Which store version to deploy to
  4. Status - Active/inactive