Components

​

What are Components?

Components are React-based UI elements that integrate seamlessly with Ollie Shop’s backend through our APIs. They allow you to create custom checkout experiences while maintaining clean separation between presentation and business logic.

​

How Components Work

Ollie Shop uses a Template and Slot system:

• Templates: Pre-defined layouts with designated areas (slots) for components
• Slots: Specific positions where components can be placed
• Components: Your custom React elements that fill these slots

Every template includes default (native) components that you can replace with custom ones, or you can add components to empty slots.

​

Component Requirements

Every Ollie Shop component must include:

​

Required Files

1. index.tsx - Your React component
2. package.json - Dependencies and metadata
3. node_modules/ - Installed dependencies
4. styles.css - (Optional) Custom styling

​

package.json Configuration

Your package.json must include the Ollie Shop SDK as a dependency:

{
  "name": "custom-component",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@ollieshop/sdk": "0.x"
  }
}

​

Component Implementation

The index.tsx file must export a React component as the default export:

import React from "react";
import "./styles.css";
import { type CustomComponent } from "@ollieshop/sdk";

const HelloUser: CustomComponent = ({ cart }) => {
  return (
    <div className="container__custom__component">
      Hello {cart.customer?.firstName}
    </div>
  );
};

export default HelloUser;

​

Styling

We recommend using Tailwind CSS for styling. Import your styles in the main component file:

.container__custom__component {
  margin: auto;
  max-width: 1280px;
  padding: 16px;
}

​

Deploying Components

To upload a component to your store, follow our comprehensive development guide: