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 & Preview.js VS Code Extension

After adding these basic configurations you’ll be able to access the folder.
1

Open in VS Code

code . # This opens your project in VS Code
2

Install Preview.js Extension

Before making any changes to this component we recommend installing the Preview.js plugin in your IDE.If you are using VSCode you can search for Preview.js on the Extensions Marketplace (located on the left side menu).
  1. Open VS Code Extensions (Cmd/Ctrl + Shift + X)
  2. Search for “Preview.js”
  3. Install the extension by Zenc Labs
Preview.js provides instant visual feedback while developing React components, making development much faster.
3

Install Project Dependencies

Developing with Ollie Shop requires you to use npmIn the VS Code terminal, run:
npm install
This installs all required packages for your projectNpm Install Pn

​
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 CodeClick “Open HelloWorld in Preview.js” to see live preview
Open Previewjs Pn
2

See Live Preview

Preview.js shows your component in real-time. Try modifying the code and see instant updates!
Previewjs Live Pn
3

Add Checkout Features

Replace the code in the index.tsx file with the code below.
You’ll now use the useCheckoutSession action from the ollie-sdk. Allowing you to display data from your cart.
import { useCheckoutSession } from '@ollie-shop/sdk';
import React from 'react';
import styles from './styles.module.css';
export default function HelloWorld({ name = "Stranger" }) {
  const { session } = useCheckoutSession();
  
  return (
    <div className={styles.container}>
      <h1>Hello, {name}!</h1>
      <p>Test</p>
      <p>Added new paragraph</p>
      <p>Session ID: {session.id}</p>
      <p>Cart length: {session.cartItems.length}</p>
    </div>
  );
}
Component Modifications Pn
The 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: Connect Component ID to Your Code

Link your local component to the admin dashboard configuration.
1

Include your Store settings

For a successful connection we must make sure that your are connected to the Store Id and your versionIn VS Code:
  1. Open your component in Preview.js
  2. Click Open Settings
  3. Paste your Store ID from the admin dashboard
  4. Paste your Version ID from the admin dashboard
  5. Click Save
Previewjs Component Link Store PnPreviewjs Component Connection Pn
2

Include your Component Id

Paste the Component Id that you created directly in the admin in Step 4 and click Update
Previewjs Component Id Pn

​
Step 6: Build and Deploy

Time to deploy your component to production!
1

Build Your Component

In Preview.js click the 3-dott on the upper right side and then click Settings, and click Save.
Previewjs Settings Open PnPreviewjs Settings Form Pn
2

Log In via CLI

Open your terminal and authenticate using the CLI.
npx @ollie-shop/cli login
3

Deploy to Ollie Shop

Deploy the Component Using preview.js. Click again on the 3-dott icon and click Deploy and **include the Component Id again **and click Deploy .
Previewjs Deploy PnPreviewjs Deploy Form Pn
4

Verify Deployment

  1. Go back to the admin dashboard
  2. Navigate to your component
  3. Check the deployment status
  4. Visit your store’s checkout to see your component live!
    Store Click View PnStore View Custom Component Pn
You’ve successfully created and deployed your first Ollie Shop component! Your custom checkout enhancement is now live.