Quickstart with custom sections without building a template
Last updated
Was this helpful?
Build appsContact API support
Last updated
Was this helpful?
Custom section is a building block of the website page created by you or your developer. Sections are not limited in their content and therefore can cover any functionality. You can develop and publish sections without building fully functional templates as long as each of your sections has a completed style and functionality.
Sections are based on Typescript language and its Vue framework. You need proper knowledge of TypeScript to uncover the full potential of the feature.
Sections are built locally and then deployed to the Ecwid environment. After deploying, your custom sections will become available in the website editor. To apply any changes deployed to the existing section, remove and then reinstall the section in the editor.
You need a store on any paid plan to start working with sections.
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 for Ecwid.
to get a test store.
To customize your working store, build sections in a local environment and test them inside the website Editor without applying any changes. Preview mode in the editor allows it.
Working with Site sections 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.
Set up a custom application for your Ecwid store right from the admin, it only takes a few seconds:
With the app, you can access store data with API. However, you need to request additional permission to build sections: add_custom_blocks.
With Crane, you can get a section 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 section code.
Create a project folder:
Install all required modules:
Initialize a new app inside the project folder and go into its folder:
Initializing the app automatically inits an example section inside its folder. However, you can add more sections at any time with the following code:
After that, go into the example section folder and install additional dependencies for its example code:
Now you have a project folder with all the required files and modules to start section development.
After the changes, your file should look like this:
From this point, you can start developing custom sections. To start, deploy your example section to Ecwid as it is.
Code example:
After that, check the version in the package.json file. You should see something like this:
Version value starts with 0.0.1 and iterates automatically with each successful deployment. The value from the package.json file is the next deployment version. We recommend not editing it manually.
Now you can find your custom sections in the website editor in your Ecwid admin. Go to the editor and click the + Add section button in the side menu.
with your application name or client_id and required access scope, so we can update the app for you.
CLI (Command Line Interface) is required to deploy sections to Ecwid. Make sure that your local node version matches the minimum version required by the crane tool. We recommend using at least version 10.7.0 to avoid any npm-related issues. Find instructions on installing node and npm on the .
Crane is a CLI tool for developing Site sections.
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 sections you build locally with the application on Ecwid side. Open the file 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 a success message in CLI. with details about your application and store if you have any errors in this step.