Skip to main content
This tutorial will guide your through the necessary steps to create a new component, preview it while in development, deploy it to your store and assign it to a specific position (or slot as we call it) in your store.

​
Prerequisites

1

Node.js 20+

node --version  # Should show v20.0.0 or higher
Download Node.js if not installed
2

VS Code

Download VS Code - Recommended editor
3

Git

git --version  # Verify Git is installed
4

Ollie Shop Store

You have created a Store in Ollie Shop

​
Step 1: Create a Hello World Component

In your terminal, use the create-ollie-shop command to triger the scaffolding of a new project with our Hello World component.
1

Create Your Project

Run the creation command
npx create-ollie-shop
You’ll be prompted for:
  • Project Name which will be the name on the folder.
  • Store ID leave empty - you’ll be able to add this information at a later step.
  • VTEX Account Name the id of your store in in your ecommerce provider.
  • Version ID leave empty - you’ll be able to add this information at a later step
2

Navigate to Project

Replace [your-project-name] with the name you chose
cd [your-project-name]

​
Step 2: Install Dependencies

After creating the project, set up your development environment.
1

Open in VS Code

code . # This opens your project in VS Code
2

Install Project Dependencies

Developing with Ollie Shop requires Node.js and npm.In the VS Code terminal, run:
npm install
This installs all required packages for your project.

​
Step 3: Develop Your Component

Now let’s build a checkout component using the Ollie Shop SDK.
1

Open Component File

Open components/HelloWorld/index.tsx in VS Code.This file contains your component code that will be deployed to your checkout.
2

Add Checkout Features

Replace the code in the index.tsx file with the code below.You’ll now use the useCheckoutSession hook from the @ollie-shop/sdk package to access checkout session data.
index.tsx
import { useCheckoutSession } from '@ollie-shop/sdk';
import React from 'react';
import styles from './helloWorld.module.css';

export default function HelloWorld({ name = "Stranger" }) {
  const { session } = useCheckoutSession();
  
  return (
    <div className={styles.container}>
      <h1>Hello, {name}!</h1>
      <p>Session ID: {session.id}</p>
      <p>Cart has {session.cartItems.length} items</p>
    </div>
  );
}
Your component now accesses real checkout session data!

​
Step 4: Create Component in Admin Dashboard

Before deploying, you need to register your component in the admin dashboard.
1

Navigate to Components

In the admin dashboard:
  1. Click “Components” in the sidebar
  2. Click “Create Component” or “Create Your First Component”
Component Create Pn
2

Configure Component

Fill in the component details:
  • Name: Your component name (e.g., “My Custom Component”)
  • Active: Toggle ON to enable the component
  • Slot: Select where the component appears (e.g., “Cart Sidebar”)
  • Version: Select your store version
Click “Create Component”
Component New Create Form Pn
3

Get Component ID

After creation, you’ll see the Component Configuration page.Copy the Component ID - you’ll need this for deployment!Example: 26f2e95f-e7f3-4e26-903f-a5ad4e03f584
Component Get Id Pn

​
Step 5: Preview Locally with Studio

Run the dev server and preview your component live in the checkout.
1

Start the Dev Server

In your VS Code terminal, start the Ollie CLI dev server (hot reload):
ollieshop start
This serves your components on http://localhost:4000 and watches for changes.
2

Open Studio

In the admin dashboard, go to Studio. With the dev server running, your component appears in the Components tab and renders live in the checkout preview. Editing your code hot-reloads the preview automatically.
3

Note Your Component ID

From Step 4, keep the Component ID handy — you’ll use it to deploy: 26f2e95f-e7f3-4e26-903f-a5ad4e03f584

​
Step 6: Deploy with Studio

With the dev server running (Step 5) and your component visible in Studio, deploy it without leaving the dashboard.
1

Open the Components tab

In Studio, find your component in the Components tab. Make sure the CLI status dot is green (the dev server is connected) and the build has no errors.
2

Deploy

Click the upload icon on your component’s card. Confirm in the dialog — Studio bundles your component, uploads it, and shows the build status.
3

Wait for the build to succeed

Studio polls the build and notifies you when it’s done.
4

View on your live store

Visit your store’s checkout to see your component live!
Prefer the command line? The CLI is documented separately under CLI Reference.
You’ve successfully created and deployed your first Ollie Shop component! Your custom checkout enhancement is now live.