Development
Build and customize your checkout experience with Ollie’s flexible components and templates.
Developing a Custom Component
You can use your preferred JavaScript package manager—either npm or yarn—to install dependencies and manage your project.
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:
- Open any component file in your project.
- Click the Preview.js icon in your editor, or use the corresponding keyboard shortcut.
- 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
Error: Could not load the "sharp" module using the darwin-arm64 runtime
Error: Could not load the "sharp" module using the darwin-arm64 runtime
This may be due to an outdated version of node. Try the following:
- Remove the currently-installed version of ollie-shop:
npm remove -g create-ollie-shop - Upgrade to Node v22 or higher.
- Reinstall ollie-shop:
npm install -g create-ollie-shop
Issue: Encountering an unknown error
Issue: Encountering an unknown error
Solution: Go to the root of your device and delete the ~/.ollie-shop folder. Afterwards, run npx create-ollie-shop again.
Issue: Preview.js Isn't Loading or Showing Updates
Issue: Preview.js Isn't Loading or Showing Updates
Solution: Make sure only one instance of Preview.js is running at a time. Running multiple instances simultaneously can cause conflicts and prevent the preview from working correctly.
Still stuck? Report an issue