Basics & architecture of Strapi

This page explains the basic concepts and architecture of Strapi. The goal is to provide an understanding of how Strapi is built as a headless CMS, what role the API-first approach plays, and how content from Strapi is delivered to the WEBSALE shop. This page thus serves as a basis for understanding and confidently applying the other areas of the documentation – in particular content types, components, and content maintenance.

---

​

Basics of Strapi

​

Understanding the Strapi architecture

In Strapi there are two main areas responsible for managing and structuring content: the Content Manager and the Content-Type Builder. These areas complement each other and together provide a powerful toolset for content management and design.

---

​

Content-Type Builder & Content Manager

​

Content-Type Builder: defining structures and components

This area is used to define the structures in which content will later be entered. Here you define which fields and data types the content should have, and you create the components that will then be filled in the Content Manager.

• Define structures: The Content-Type Builder is used to create and edit the schemas for collections and single entries. These schemas determine which data fields and data types are available and what the input masks in the Content Manager look like.
• Design components: Another important function of the Content-Type Builder is to create reusable components. These components can be used in different parts of the project, thereby promoting consistency and reusability in development.

​

Content Manager: managing content

Here the content created and maintained in a Strapi project is managed directly. This is where users actually add content such as texts, images, and other media that are displayed on the storefront.

• Manage content: In the Content Manager, all content such as texts, images, videos, and other media that are visible directly on the storefront is managed. Users can create new content here, edit existing content, or delete content that is no longer needed.
• Organize data: The Content Manager enables systematic organization of content in collections and single entries. This structure helps make content easier to find and manage and supports a clear hierarchy and order within the system.

​

Interaction of Content Manager and Content-Type Builder

The Content Manager and the Content-Type Builder work hand in hand:

• From the builder to the manager: Structures and components created in the Content-Type Builder serve as the basis for content management in the Content Manager. This ensures coherent data handling and efficient content management.
• Adaptability and dynamics: Due to the flexible structure of the Content-Type Builder, adjustments can be made that are then reflected in the Content Manager without content being lost or having to be cumbersomely recreated.

---

​

Collections, single entries, and components

​

Collections

Collections in Strapi are structures that serve to manage several similar pieces of data under one roof. They are well suited for organizing content pages, multiple job listings, or even blog articles. A collection thus acts as a central point under which similar content or elements can be subordinated. Collections are available both under the Content Manager and the Content-Type Builder. More information about collections is available here.

​

Single entries

Single entries are specific content elements that are not necessarily part of a repeatable collection. They can be used for special pages or specific content blocks, such as a banner or a product slider on the home page. Single entries are available both under the Content Manager and the Content-Type Builder. More information about single entries is available here.

​

Content types for creating new collections & single entries

Content types are the building blocks for structuring content within Strapi. They define how data is organized in collections and single entries. New content types and thus new content under collections and single entries are created in the Content-Type Builder.

​

Components

Components in Strapi are reusable building blocks that can be used in different parts of the project to design content consistently and efficiently. More information about components is available here.

---

​

Media library

Strapi has an integrated media library that enables central management of media such as images, PDFs, and other files. All uploaded images and files are stored in the media library and can be managed from there. This includes deleting, replacing, or reusing media in different parts of the Strapi project.

​

Uploading media

Media can either be uploaded directly to the media library or added during content maintenance. When media is needed while editing content, the media library can be used. Here you have the option to select already uploaded files or to add new files.

​

Automatic image conversion

Strapi has a built-in converter that automatically compresses uploaded images to improve loading times and optimize storage requirements. In addition, the WEBSALE image converter is used, which converts images into the source format and the WebP format. These formats offer improved compression rates and are optimized for web use.

​

Template integration

The template manager defines within the template which image is used in which format. New images and media elements added to the media library must therefore be placed and configured in the template according to the template manager’s specifications. More information for template managers is available here.

---

​

Extending Strapi for subshops

​

Create a new language

• Settings → Internationalization
• “Add new language”
• Select language.
• Do not change the display name.
• Note / copy the locale ID. For example, “French (fr) - fr would be the locale ID here.
• Save.

​

Assign a language to a subshop

• Content Manager → Configuration
• Choose ”+ Add entry” or edit an existing one.
• Under “WEBSALE Subshop ID”, a comma-separated list of subshop IDs can now be entered.
• Under “Strapi locale ID”, the “locale ID” copied in the previous step must be inserted.
• Save afterwards.