Components

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

Name - Descriptive component name
Slot - Where the component will appear
Version - Which store version to deploy to
Status - Active/inactive

Slots Functions

Overview

Start Here

Core Concepts

Customization

CLI Reference

Ollie SDK

Analytics & Scripts

AI Skills

Tools & Tips

Product updates

Component Architecture

Creating Components

​Component Architecture

​Creating Components

Component Architecture

Creating Components