> For the complete documentation index, see [llms.txt](https://docs.ecwid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ecwid.com/site-themes/develop-custom-sections/quickstart-with-custom-sections-without-building-site-themes.md). # Quickstart with custom sections without building Site themes **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 themes 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. ### Step 1. Sign up with Ecwid To work with sections and themes, you need a store and API access. Start your journey by submitting a new dev form from the following link: . Specify that you are working on a theme, leave some contact details, and share some of your existing projects/apps here. Our App team will review the form shortly and contact you by email to give a **free test store with API access**. Feel free to [email us](mailto:ec.apps@lightspeedhq.com) anytime. ### Step 2. Set up an application 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: [**#develop-apps**](https://my.ecwid.com/#develop-apps) ### Step 3. Get access scope With the app, you can access store data with API. However, you need to request additional permission to build sections: `add_custom_blocks`. [**Email us**](mailto:ec.apps@lightspeedhq.com) with your application name or *client\_id* and required access scope, so we can update the app for you. ### Step 4. Initialize project files Use CLI (Command Line Interface) to deploy the theme 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: ```sh node -v npm -v ``` {% hint style="success" %} We recommend using **Node.js LTS version 22+** to ensure stability and avoid compatibility issues. {% endhint %} **Crane** is a CLI tool for developing Site themes. Learn more about the Crane tool With Crane, you can run sections locally and control their deployment with CLI. Use the following commands to set up a project folder, install all dependencies, and get the section template code. * Create a project folder, go into it, and install dependencies: ```sh mkdir my-theme-project cd my-theme-project npm install vite vue sass @lightspeed/crane@latest @lightspeed/eslint-config-crane@latest ``` * Initialize a new app inside the project folder (change `my-app` with your name for the app): ```sh npx @lightspeed/crane@latest init --app my-app ``` * Go to the app folder and initialize a new section (change `my-section` with your name for the section): ```sh cd my-app npx @lightspeed/crane@latest init --section my-section ``` Now you are ready to start developing a section. ### Step 5. Set up a project in IDE We recommend using the free [**VS Code**](https://code.visualstudio.com/download) application with **Vue** and **TypeScript** extensions. Open the project folder there and check the file structure inside. [**Learn more about the structure**](broken://pages/cWOioSpFY8Nt4Z27JcY5) 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 [**Ecwid admin > #develop-apps > Details**](https://my.ecwid.com/#develop-apps) page. After the changes, your file should look like this: ```json { "app_client_id": "client_id", //replace with client_id from your app settings "app_secret_key": "client_secret" //replace with client_secret from your app settings } ``` ### Step 6. Deploy example section to Ecwid {% hint style="info" %} Before deploying, make sure your application is installed in the Ecwid admin. Go to [**Ecwid admin > My apps**](https://my.ecwid.com/#my_apps) and check if your custom app is listed there. {% endhint %} Once you are ready to check how your code works in the store, go into the project folder and use the following commands to preview and build the section locally, then publish it to your Ecwid store: ```sh cd ~/{proj_folder}/my-app npx @lightspeed/crane@latest preview npx @lightspeed/crane@latest build npx @lightspeed/crane@latest deploy ``` You should see a success message in CLI. [**Email us**](mailto:ec.apps@lightspeedhq.com) with details about your application and store if you have any errors in this step. After that, check the version in the `package.json` file. You should see something like this: ```json { "name": "example-section", "private": true, "version": "0.0.2", ... } ``` 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.ecwid.com/site-themes/develop-custom-sections/quickstart-with-custom-sections-without-building-site-themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.