Before continuing, ensure the following:

  • Node.js v22 or higher is installed
  • Access to your store in Ollie Admin

Step 1: Install Ollie Shop:

Create a new project using the create-ollie-shop CLI tool:

npx create-ollie-shop your-store

Replace your-store with your desired folder name. This command scaffolds a new Ollie Checkout project.

Step 2: Enter Configuration Details:

During setup, you’ll be prompted to provide some values. You can find these in Ollie Admin:

  • Store ID → Found on the Settings page
  • VTEX Account Name → Same as Platform Store ID in Settings page
  • Version ID → Found on the Versions page

These values are saved to ollie.json and can be updated later.

Example ollie.json Configuration

{
  "storeId": "1d9b00fd-5dc7-4521-a581-8a4c9643db7f",
  "versionId": "70008de6-416b-43ba-a0ea-093c02cd1fab",
  "platform": "vtex",
  "platformStoreId": "olliestore",
}

​
Additional Options

You can enhance the checkout behavior and appearance using optional ollie.json fields:

  • sessionId: Inject an orderForm for debugging or previewing sessions
  • props: Add flags or props to customize layout, features, or logic
  • theme: Apply a custom theme to globally style your checkout

Step 3: Developing a Custom Component

You are free to use npm or yarn.

Install Previewjs

Preview.js works automatically with Ollie Shop projects created using create-ollie-shop. It reads your project setup and starts without any extra configuration.

Using Preview.js

To use Preview.js in your Ollie Shop project:

  1. Open any component file in your project.
  2. Click the Preview.js icon in your editor, or use the corresponding keyboard shortcut.
  3. A live preview of the component will appear, updating in real time as you make changes.

This integration allows you to develop and test components without setting up a separate environment or manually configuring Preview.js.

Setting the Component ID

After launching the preview:

  • Ensure the Component ID field is populated with the value from meta.json.
  • If it’s empty, copy the ID from meta.json into the field and click the Update button.

​
Troubleshooting

Still stuck? Report an issue