Ollie Shop works with Templates, which is nothing but a pre-defined set of slots. Slots are where a Component will go. Once you have created your own component, you can insert it in any slot.

Any template will come with default, or “native”, components. Simply replace them with custom components, or add your custom components to empty slots.

A component is a React component.

​
What are the minimum requirements to create a Component?

Ollie Shop component is composed of an index typescript file, a CSS file (optional), the package.json and the folder node_modules.

File package.json

On the package.json you need to insert the ollieshop/sdk as a dependency:

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

If needed, you can include more dependencies on the package.json. However the total zip file cannot exceed 5MB.

index.tsx

The file index.tsx must export a function as default.

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;
Styles

We recommend using Tailwind for CSS. Simply import it on the index.tsx file

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

​
How to upload a Component to my store?

Checkout our development tutorial development tutorial for an in-depth guide on how to create a Component and deploy it to your store.