Components & collections in Strapi

This page explains how content is structured in Strapi and what role components, collections, and single entries play. You will learn what the respective content types are used for, how they differ, and how they work together in the Content Manager to maintain content. The goal is to better understand the structures provided by WEBSALE by default, create content correctly, and safely extend existing content areas – without interpreting Strapi as a page builder.

---

​

Components

As in many other content management systems, components serve as reusable elements that can be used to design and structure the online shop. These components are basically predefined building blocks that implement specific functions or layouts and can be used in different parts of the shop.

​

Overview of the standard components

An overview of all components available in the standard scope can be viewed via the left-hand side menu under the navigation item “Content-Type Builder”. If the “Content-Type Builder” navigation item is not visible, your user account may be missing the corresponding permissions. In this case, you must contact the appropriate employee in the company who can assign the corresponding roles.

​

Content

The “Content” component contains an editor whose functionality is similar to a text editor like the one known from Microsoft Word. In it, texts, media, tables, and other elements can be inserted, edited, or formatted. In addition, there is the option to assign CSS classes to further specify and define the appearance. You can also set whether the content should be displayed across the entire screen width or adapt to existing components.

​

WS Inquiry

The “WS Inquiry” component is used to display a WEBSALE form on the page. In the VX version of WEBSALE, however, the integration of forms is done exclusively via the Admin Interface. You can view a guide here.

​

Slider

A slider is an interactive component in our shop system designed to present content dynamically in a horizontally scrollable display. This form of presentation makes it possible to show multiple elements such as images, products, or promotional banners attractively and user-friendly in a limited space. Users can scroll through the content, which encourages active and engaged interaction with the offered content. The different slider types in our system – the general image slider, the product slider, and the product slider for products of a category – use this dynamic form of presentation to support specific use cases, whether by displaying large banners for marketing purposes or highlighting selected products in detail.

​

Slider

This is a basic slider component used mainly for large banners and images. It supports the concept of “responsive design” by allowing different image files to be stored for different viewports (display sizes and devices). Each slide within this slider can be provided with an individual link to direct users to further information or other areas of your shop. If you want text on the slides, this must already be included on the banners and images. Text cannot be added within the standard component via the Strapi input mask, which requires the visual content to be designed before upload.

​

Product slider (manual)

This component can be used to display a slider of product boxes in the shop. The properties and functions of the slider are configured directly in the shop. This includes settings such as breakpoints, the speed of slide transitions, the display of navigation arrows, and other behaviors of the slider. These settings cannot be adjusted via the CMS. Changes to the slider configuration must always be made via the template manager. The addition “Manual” means that the displayed products can be selected by you. To do this, the product numbers of the desired products must be entered as a comma-separated list in the “Product list” field. If desired, a heading can be added to the slider. This helps customers understand which products they can find under this slider. There is also the option of determining whether the slider should be displayed across the entire screen width or not. Note that the entered product numbers are not automatically checked for correctness. If the desired product is not displayed in the storefront, please check the corresponding entries.

​

Product slider for products of a category

This component works similarly to the “Product slider (manual)” component. The difference is that here no comma-separated list of product numbers is used. Instead, a category index is entered, from which the products are automatically loaded and displayed in the slider. It is not possible to exclude individual products of the category from being displayed in the slider. The products are presented in the order in which they are stored in the shop database. A special sort specification or sort order is not possible. Changes to products within this category are automatically reflected in the slider, so no manual adjustments to the slider are necessary for product updates. This ensures an always up-to-date and low-maintenance presentation of the products. Note that the entered category index is not checked for correctness. If the desired category is not displayed in the storefront, the category index entry must be checked again.

​

Product teaser

A product teaser is a visually appealing component in our shop system that serves to present individual products or a small, selected group of products prominently and conspicuously. In contrast to a product slider, which presents many products in a dynamic, scrollable display, the product teaser focuses on highlighting specific products. When multiple teasers are created, they are not scrolled but, depending on the storefront definition, displayed next to or below each other, which enables a flexible and adaptable presentation. The products for the product teaser can be selected by you by entering the desired product numbers in the “Product list” field as a comma-separated list. Please note that the entered product numbers are not automatically checked for correctness. If the desired product is not displayed in the storefront, the product number entries must be checked again. In addition, if desired, a heading can be added to the teaser to make it clear to the customer which products they can find under the teaser area.

​

Link helper

One of the standard components in Strapi is designed to make adding links easier. For this, four link types are available that can be used flexibly to create different types of links:

• Product:
  • In the “Link” field, the product number must be specified – Strapi then automatically generates a link that leads directly to the detail page of this product.
• Category:
  • In the “Link” field, a category index must be entered. The link then takes the user directly to the corresponding category page where all products of this category are listed.
• Internal:
  • For internal links within the online shop, you can specify specific paths or routes that lead to other pages or resources within the online shop.
• External:
  • This link type makes it possible to enter an external URL. This option is used to direct visitors to other websites that are not part of your own shop.

​

Meta information

Meta information is crucial for the search engine optimization (SEO) of the online shop. In Strapi, this information can be set specifically for each page to improve visibility and findability in search engines.

• Meta title
  • The meta title is a critical SEO factor and appears in the browser as the tab name and in the search results as the heading of the entry.
  • Enter the title of the page that precisely reflects the topic or content of the page.
• Meta description
  • The meta description provides a short and concise summary of the page content. This description appears below the title in the search result lists, for example from Google, and can influence the click-through rate.
  • Formulate an appealing description that effectively summarizes the content of the page and invites people to click.
• SEO URL
  • The SEO URL is the address under which the page will be accessible. It should be meaningful and SEO-friendly.
  • By default, the URL will begin with cms/. For special requirements or additional directories, your WEBSALE contact person is available. The system administration will make the necessary adjustments and set up the directories accordingly.
• Meta robots
  • The meta robots tag controls the crawling and indexing behavior of search engines for the page.
  • You can choose between various directives such as index, follow, noindex, follow, index, nofollow, and noindex, nofollow to control whether and how search engines index and link the page.
  • For a detailed explanation of the different meta robots tags, we recommend consulting Google’s guide on controlling crawling and indexing: https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag?hl=en

​

Responsive image

The “Responsive image” component makes it possible to set up images so that they are optimally displayed on different screen sizes. This component supports the definition of images for various responsive breakpoints, which ensures that the shop looks good on all devices. Responsive breakpoints are specific screen widths at which the layout of the website changes to provide a better user experience. These are defined in many CSS frameworks such as Bootstrap. For a detailed explanation of breakpoints in the “Bootstrap” framework, visit Bootstrap Breakpoints. Assign an appropriate image file to each breakpoint. Typical breakpoints include sizes for XS (extra small), SM (small), MD (medium), LG (large), and XL (extra large). The image entered in the XS field serves as a “fallback”. If no specific image file is stored for a larger breakpoint, the image from the XS field is automatically displayed.

​

WS Subshop Locale

The “WS Subshop Locale” building block is specifically designed to establish a connection between the language localizations (locales) stored in Strapi and the corresponding WEBSALE subshops. This enables targeted control of language-specific content for different subshops.

• wsSubshopId:
  • In this field, the ID of the subshops assigned to the respective language variant is entered. This is used to assign language-specific content to the corresponding subshops.
• strapiLocaleId:
  • Here the specific locale ID used in Strapi to define the language is entered. This is particularly important to ensure that the correct language-specific content is assigned to the corresponding subshops.

For example, the entry for the language variant / locale “German (de)” can look like this:

---

​

Creating new components

The example describes creating a component called “Job ad”. This component is to display the following content later in the storefront:

• Title (data field of type: text)
• Requirements (data field of type: text)
• JobDescription (data field of type: text)
• We_Offer (data field of type: text)
• ClosingFormula (data field of type: text)
• Salary (data field of type: number)
• Date (data field of type: date)
• Address (data field of type: text)
• Mail_Contact (data field of type: email)\

​

Create the component in the Content-Type Builder

• In the Strapi Admin Dashboard, open the Content-Type Builder in the left-hand side menu.
• In the sub-menu Components, select the option + Create new component.
• Assign a display name, select or create a category, and assign an icon for the component if desired.
• Click Continue.

​

Define the component structure and create fields

• For each detail (title, requirements, date, salary), you can decide whether you need a separate data field (for example text, date, number) or a textarea in which all information can be entered at the same time.
• Create the first field for the component and, during creation, select a data type, for example data type “Text” for the “Title” field.
• A data type in Strapi defines the kind of data a field can hold. Examples are “Text” for text lines, “Date” for dates, and “Number” for numeric values. Each data type determines how the data is processed and displayed in the system.
• More information on “data types” can be found in the Strapi documentation.
• Then assign a name to this field and configure additional options that are available depending on the data type.
• Save the field with “Finish” or create more fields directly in the dialog window. Continue in this way until all required fields for the “Job ad” have been created.

​

Integrate the component into content pages

• In the sub-menu item “Collections”, select “Content pages”.
• Select a content page that should contain the “Job ad” component in the future.
• Within the “Content” field, click “Add component” and select “Use existing component”.
• In the drop-down menu, select the new “Job ad” component.
• Click “Finish” and save the changes.
• Repeat the process for every page on which the “Job ad” component is to be used.

Under “Content” → “Add component”, the selection window for adding the new component opens. In the selection list, the new component must be selected.

​

Shop template and design adjustments

• Inform the template manager of your online shop about the newly created “Job ad” component.
• Discuss together how the new component should be structured and how it should be visually designed so that it fits the existing design of the online shop.
• The designer adapts the templates accordingly to correctly display the data from the new component.

​

1.2.5. Review and approval

• After the component has been created, assigned, and the templates adapted, the changes can be viewed on the edited page. Make sure that everything works as expected and is visually appealing.

​

1.2.6. Important note when creating components

• Components should be thoroughly planned and thought out before they are used productively. Coordination with the template manager or designer and detailed considerations about the structure are crucial to design a component correctly and minimize future adjustments. More information for template managers can be found here.
• Be aware that editing or deleting components in ongoing projects can lead to unexpected behavior or errors.

---

​

Editing components

​

Edit existing component

• In the left-hand menu, select “Content-Type Builder”. This area makes it possible to define and adapt the data structures in Strapi.
• Under the menu item “Components”, a list of all created components is displayed. Select the component you want to edit.
• To make it easier to identify in the admin panel, the display name and the icon of the component can be edited.
• It is possible to add, edit, or remove fields from an existing component. This flexibility allows components to be adapted to new requirements.
• For changes to components to be displayed later in the shop, a template manager or designer should always check the shop templates. Changes may be required. More information for template managers can be found here.

​

Notes & tips when editing components

• Although Strapi is delivered in “develop” mode, which allows the creation and editing of components, the constant adjustment of existing components that are already used in production should be avoided. Strapi is not designed for components that are already filled with data and in use to be continually changed.
• Important to mention is that editing or deleting components in ongoing projects can lead to unexpected behavior or errors. In particular, deleting components can have serious effects when they are already heavily used.

---

​

Working with components

​

Description for components

To optimize the overview of the components of the page, you have the option here to enter a description in the “Description” field.

​

Design of the components

​

Additional CSS classes for components

Each component in Strapi offers the option to assign specific CSS classes. These classes make it possible to adjust the appearance of the components and visually integrate them into the overall design of the shop. The assigned CSS classes must be stored in your shop’s CSS files. Detailed instructions for creating and managing these CSS files are available in the WEBSALE documentation. There it is described how and where CSS files for the shop can be stored to ensure seamless integration and coherent design.

​

Basic design of the components

While within Strapi components, stylistic adjustments can be made using CSS classes, the basic design of the content is mainly defined via the shop templates. If fundamental changes to the design of the content provided by Strapi are desired, these changes should be made directly to the shop templates on which the Strapi content is placed. This includes changes to layouts, color schemes, fonts, and other design elements that shape the appearance of the online shop. For detailed information on how and where these shop templates can be edited, we again refer to the WEBSALE documentation. There you will find detailed instructions and help guiding you through the template adjustment process and ensuring that design changes are implemented effectively and consistently.

​

Effective combination of components and collections

The management of content in Strapi can be made more efficient by combining components and collections. This procedure minimizes maintenance effort and ensures consistency across different pages.

​

Components and their direct use

First, a “Job ad” component is created in the Content-Type Builder. This component contains fields such as title, start, and salary. The component can be used directly on a specific content page, such as a careers page. There the specific data of the job ads is entered manually. If the same “Job ad” component is also to be used on another page, such as “About us”, the same data must be entered manually again. This leads to duplicate maintenance effort and increases the risk of inconsistencies.

​

Using components in collections

To solve the problem of duplicate maintenance effort for components with the same content, for example job ads, a “Job ads” collection is also created in which all current job ads are managed centrally. Each job ad is created as an entry in this collection. The “Job ads” collection can then be embedded as a whole on different pages such as “Careers” and “About us”. Changes to a job ad within the collection automatically affect all pages on which the collection is embedded. This ensures that the information is consistent and up to date on all pages without having to adjust each page individually. It reduces maintenance effort and minimizes sources of error.

​

Transfer of components between WEBSALE Strapi instances

Strapi makes it possible to transfer finished components between different instances installed by WEBSALE. This process facilitates the reuse of developed components and ensures efficiency and consistency across different projects.

• Access to the receiving instance: On the receiving instance, open the path <RECEIVING_CMS_URL>/api/component-creator. This URL leads directly to the API endpoint responsible for transferring components. Follow the instructions in the “Authenticate” field. Enter the Common-ID with which the URL of the WEBSALE Strapi instance is formed.
• Authentication: Authenticate yourself with the API access data. This confirms your authorization to make changes and access the list of components. The API access data required for the transfer corresponds to the initial access data of the Strapi instance.
• Component selection: The receiving instance displays a list of available components. Select the component to be transferred. A preview of the schema of this component is displayed for review.
• Transfer of the component: Under “Transfer”, select the associated component group in which the component is to be stored, or create a new group for better organization in the dashboard. Click “Transfer” to send the component to the receiving instance.
• Automatic creation and storage: The schema of the selected component is automatically sent to a new API endpoint of the receiving instance. There an identical component with the same schema is automatically created and stored.
• Restart of the application: Due to the changes in the src/ files, the Strapi instance is automatically restarted in the background. The instance is reachable again within a few seconds after the restart.
• Verification: After the restart, the new component is available in the dashboard of the receiving instance. Check whether the component has been created correctly and is functional.

---

​

Collections & single entries

​

Create new collection or new single entry

To create new items under the Collections or Single entries areas, a new content type must be created.

• In the Content-Type Builder, you can create content types, define their fields, and set the schemas that determine what kind of data is held and how it is structured.
• You can choose whether you want to create a content type under Collections (collection types) or Single entries (single types). The ”+ Create new collection” or ”+ Create new single entry” buttons are available for this.
• Give the content type a meaningful name and define English API endpoints. For example, for the “Job ads” content type, the singular API endpoint “job-ad” and the plural API endpoint “job-ads” could be chosen.

• After all settings have been made, save them.
• New content types are transferred automatically. For the JSON file to be generated, appropriate permissions must be set for these new content types before the first transfer.
  This works as follows:
  • Navigate to Settings > USERS & PERMISSIONS PLUGIN > Roles > Authenticated
  • A list of the created content types now appears. Expand your newly created
    content type by clicking.
  • Here you now click on the “Select all” checkbox so that the content type is granted all necessary rights.
  • Confirm your changes via “Save”.

• The naming of the JSON files takes place via two paths.
  • If the content type contains a field with the name “TemplateName”, the name of the JSON file is the same as the value stored in this field.
  • If no field with this name is included, the name of the JSON file for
    collections is: <technical plural API name of the content type>_<id of the entry>.json
    Single entries: <technical single API name of the content type>.json

​

Use in the Content Manager using “Collections” as an example

In the Content Manager, the management and editing of the content of the newly created collection and/or single entries takes place based on the predefined content types. You can add, edit, or delete content according to the defined rules.

• In the Content Manager, select the newly added collection.
• Select “Component” and then “Use existing component”.
• In the “Select component” drop-down menu, select the desired component, for example “Contact”.
• Determine whether the component should be repeatable to enable dynamic content such as multiple contact persons.
• In the Content Manager, more entries can be added via ”+ New entry”.
• Fill in the fields and save the new entry.
• Inform the template manager to define how and where the new collection data should be displayed on the website.