How to use sections without templates
Last updated
Was this helpful?
Build appsContact API support
Last updated
Was this helpful?
Any page on any Ecwid website is built from sections. When you create a Site template, you basically build a couple of custom sections and then arrange default and custom sections in the template file.
However, custom sections can be used on their own, without a template, thus allowing you to add new functionality and enhance the website's look without rebuilding it from scratch.
When you start working on a site customization project, you can skip importing template files. In that case, all custom sections will become available in the Editor.
Find detailed instructions in the .
When your project doesn't have template files, its custom sections can be freely used in the website editor.
To see all available custom sections, in the editor, click + Add section, then click on the Sections from App Market in the left menu:
Custom sections, when built without a template, are always available in the editor, even if a user applied a custom Site template.
The diagram below shows the folder structure of a project with one custom section:
Files and folders marked as green are internal; they shouldn't be touched.
Files marked with the yellow color are the ones you interact with:
../packages/crane-config.json contains keys from your Ecwid app required for deploying the project.
../Section.vue is the main file with the code that builds a section on the storefront.
../settings/content.ts contains the content settings visible to the store owner in the Site editor. For example, such settings allow changing texts and images in the section.
../settings/design.ts contains the design settings allowing the store owner to customize the content's colors, fonts, etc.
../settings/translations.ts contains texts and translations for content and design settings visible in the Site editor.
../showcases/1.ts sets content/design settings to define how the section preview looks. If you want to add multiple showcases for your section, add more files to the same folder. For example, ../2.ts.
../showcases/translations.ts contains texts and translations for the showcase files.
We recommend getting an Ecwid-built example section and using it to learn all the file and code dependencies.
Now that you know how custom sections can work without templates, jump into building your own sections:
