Prerequisites
1
Node.js 20+
2
VS Code
Download VS Code - Recommended editor
3
Git
4
Ollie Shop Store
You have created a Store in Ollie Shop
Step 1: Create a Hello World Component
In your terminal, use thecreate-ollie-shop
command to triger the scaffolding of a new project with our Hello World component.
1
Create Your Project
Run the creation commandYou’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 choseStep 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
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).
- Open VS Code Extensions (Cmd/Ctrl + Shift + X)
- Search for
"Preview.js"
- 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: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 CodeClick “Open HelloWorld in Preview.js” to see live preview
2
See Live Preview
Preview.js shows your component in real-time. Try modifying the code and see instant updates!

3
Add Checkout Features
Replace the code in the
You’ll now use the
The component now accesses real checkout session data!
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.index.tsx

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:
- Click “Components” in the sidebar
- Click “Create Component” or “Create Your First Component”

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

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

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:

- Open your component in Preview.js
- Click Open Settings
- Paste your Store ID from the admin dashboard
- Paste your Version ID from the admin dashboard
- Click Save


2
Include your Component Id
Paste the Component Id that you created directly in the admin in Step 4 and click Update

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
.

2
Log In via CLI
Open your terminal and authenticate using the CLI.
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
.

4
Verify Deployment
- Go back to the admin dashboard
- Navigate to your component
- Check the deployment status
-
Visit your store’s checkout to see your component live!
You’ve successfully created and deployed your first Ollie Shop component! Your custom checkout enhancement is now live.