LogoLogo
Build appsContact API support
  • Build apps
  • Site Templates
  • API Reference
  • Changelog
  • Introduction to Instant Site development
  • Site templates glossary
  • Develop Site templates
    • Quickstart guide to a working Site template
    • Ecwid (Lightspeed E-Series) Crane CLI tool
    • Build Site templates: project structure
      • template-name.ts
      • section-name.vue
      • content.ts
      • design.ts
      • showcases/1.ts
      • translations.ts
      • layout.ts
  • Launch Site templates
    • Step-by-step publishing guide for Site templates
    • Monetize Site templates
    • Requirements for public Site templates
    • Recommendations for building public Site templates
  • Develop custom sections
    • How to use sections without templates
    • Quickstart with custom sections without building a template

Lightspeed® 2025

On this page
  • Step 1. Sign up with Ecwid
  • Step 2. Set up an application
  • Step 3. Get access scope
  • Step 4. Install Node.js and npm
  • Step 5. Start a local project with the Crane tool
  • Step 6. Set up a project in IDE
  • Step 7. Deploy example template to Ecwid
  • Next steps

Was this helpful?

  1. Develop Site templates

Quickstart guide to a working Site template

Last updated 4 days ago

Was this helpful?

In the following guide, you’ll start by signing up with Ecwid and will end up with a fully working Site template code deployed to your test store.

You need a good knowledge of Typescript and its Vue framework to build templates. Site templates are built locally and then deployed to the Ecwid environment. After deploying, you can find and install your template in the website Editor. To apply any deployed changes, you need to reinstall the template.

Step 1. Sign up with Ecwid

You need a store on any paid plan to start working with IS templates.

We will provide you with a free test store with API access if you:

  • Work on a Site customization for one of our clients

  • Want to develop a public section or template for our App Market

to get a test store.

If you already have a working store, you can safely build templates in a local environment and check them with website Editor without applying any changes. Preview mode in the Editor allows it.

Step 2. Set up an application

Working with Site templates requires authorization and access to Ecwid API. We have a platform called application where you can configure permissions called access scopes and authorize different APIs. A private application that gives access to your store API only is called a custom application.

Get up a custom app right from your Ecwid admin on the .

Step 3. Get access scope

With the app, you can access store data with API. However, you need to request additional permissions to build Site templates: add_custom_blocks and add_custom_templates.

with your application name or client_id and required access scopes, so we can update the app for you.

Step 4. Install Node.js and npm

Use CLI (Command Line Interface) to deploy the template code to Ecwid. If your CLI doesn't yet support npm/npx commands, install the required package from the Node.js official website.

Please make sure that your local node version matches the minimum version required by the crane tool. Check the node and npm version by running the following commands:

node -v
npm -v

We recommend using at least version 10.7.0 to avoid any npm-related issues.

Step 5. Start a local project with the Crane tool

Crane is a CLI tool for developing Site templates. Learn more about the Crane tool

With Crane, you can get a template code working locally and control its deployment with CLI. Use the following commands to set up a project folder, install all dependencies, and get the example template code.

Create a project folder and go into it:

mkdir {proj_folder}
cd ~/{proj_folder} 

Install all required modules to the project folder:

npm install vite
npm install vue
npm install @lightspeed/crane@latest
npm install @lightspeed/eslint-config-crane@latest

Initialize a new app inside the project folder and go into its folder:

npx @lightspeed/crane@latest init --app my-app
cd my-app

Now, inside the app folder, you need to init an example template:

npx @lightspeed/crane@latest init --template example-template

Initializing the app automatically inits an example section inside its folder. However, you can add more sections at any time with the following code:

npx @lightspeed/crane@latest init --section my-section

After that, go into the example section folder and install additional dependencies for its example code:

npm install -D sass

Now you have a project folder with all the required files and modules to start template development.

Step 6. Set up a project in IDE

After the changes, your file should look like this:

{
    "app_client_id": "custom-app-1003-1",
    "app_secret_key": "HHLmjxjjQrRpDPrC5Uzx2BooUQeeesEmr"
}

Step 7. Deploy example template to Ecwid

From this point, you can start developing custom templates. To start, deploy the example template to Ecwid as it is.

Go to the app folder inside the project:

$ cd ~/{proj_folder}/my-app

Build templates on your local machine:

$ npx @lightspeed/crane@latest build

Deploy built templates to Ecwid:

$ npx @lightspeed/crane@latest deploy

Now you can find your custom template in the website Editor in your Ecwid admin. Go to Settings > Templates in the top left Editor menu.

Next steps

Learn more about all the files in the project folder and building public templates:

We recommend using the free application with Vue and TypeScript extensions. Open the project folder there and check the file structure inside.

First, you need to set up the crane.config.json file, it will connect the templates you build locally with the application on our side. Open it and copy the client_id and client_secret from your custom application to the file. Find these values at the bottom of the page.

To do so, make sure your application is installed in the Ecwid admin. Go to and check if your custom app is listed there. After that, run the build and deploy commands in CLI.

You should see build logs and a deploy success message in CLI. with details about your application and store if you have any errors in this step.

Sign up with Ecwid
Email us
app dashboard
Email us
VS Code
Learn more about the structure
Ecwid admin > #develop-apps > Details
Ecwid admin > My apps
Email us

Learn the structure of your project
Publish your templates