Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt

Use this file to discover all available pages before exploring further.

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() {
  import React from "react";
  // Access live checkout data
  const { session } = useCheckoutSession();
  const { theme } = useStoreInfo();
  
  return (
    <div style={{ color: theme.colors.primary }}>
			<h3>Welcome {session.customer?.firstName}!</h3>
			<p>Cart total: ${(session.totals.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