Editing content in Strapi

This page describes how content is maintained and adapted in the Strapi CMS in the WEBSALE context. This includes editing existing content, creating new content, and the basic differences between saving and publishing – including notes on prior testing. Using practical examples (for example content pages, sliders, product sliders, product teasers), the documentation shows typical work steps in the Content Manager and helps you to safely implement changes without needing development knowledge.

---

​

Editing content

​

Overview of the Strapi content delivered by default

Strapi enables the management of a variety of content pages that are essential for the basic functionality and information delivery of the online shop. The standard scope of our shop software delivers the following pages:

• Home page: The central point of contact for shop visitors.
• Imprint: Important legal information about the shop operator.
• About us: Information about the company, its history, and its values.
• GTC (General Terms and Conditions): The legal basis for shopping in your shop.
• Privacy policy: Explanations of how user data is handled and data protection regulations.
• Contact form: A page that enables customers to get in touch directly.

These pages form the basic framework for the legal and personal presentation of the online shop to customers.

---

​

Save vs. publish

In Strapi, the handling of content is separated by the “Save” and “Publish” functions to enable flexible content management. These functions influence how content is edited and made visible to the visitor.

​

Save

• Saving content in Strapi makes it possible to make changes to a page or post and to back up these changes internally without them being immediately visible to the public.
• If a page or content has already been published and changes are made, these changes become publicly visible immediately when saved. This means that all saved changes to published content are updated directly on the live page.

​

Publish

• Publishing makes the content visible to everyone.
• If a page that was previously published is set to “unpublished” and then changes are made and saved, these changes remain internally without being visible to the public. These saved changes are in draft status.

​

Test in advance

Despite the public visibility of changes after saving, Strapi offers the option to view changes in test mode before they finally go live. This enables a final check to ensure that everything works as desired.

---

​

Editing content pages using the imprint page as an example

To make changes to the content of a content page, you first have to select the page in question.

​

Select page for editing

• Navigate in the left-hand side menu to Content Manager.
• Within Collections, select the sub-item Content pages. If it is not already selected, select it to edit the content pages.
• There an overview of the stored content pages is displayed.
• Select the Imprint page or another page that you want to edit. After selecting the page, the heading shows the name of the template – in this case tpl_imprint. This information is useful when the design of this page fundamentally has to be changed via the template.

​

Open the editing view

• After the selection, the editing page for the imprint opens.
• The editing page is divided into different sections to make orientation easier:
  • Section 01: Template name and meta information
  • Section 02: Page content
  • Section 03: Test mode

​

Edit the page details

• Template name: Only change the name if the template has been changed. Make sure that the corresponding template is available on the server.
• Meta information: Optimize the SEO information (meta title, meta description, meta robots) to improve findability in search engines.
• SEO URL: Specify the URL under which the page can later be accessed.

​

Edit the page content

• Open one of the content components that are used by default for the page content of the imprint page. Adjust the text as needed.
• To extend the page with more content, additional components can be added:
  • Click the (+) icon next to or below the existing component to “Add a component to Content”.
  • Choose from the available components that have been configured for the Strapi instance. This can range from media elements and forms to special layout components that enhance the functionality and visual experience of the page.
  • After adding, the component opens automatically and editing can begin.

​

Saving and test mode

• Test mode options: Before saving, at the end of the page you must decide via the selection “YES / NO” whether the changes should be displayed in test mode or in live mode.

---

​

Editing an image slider using the home page as an example

​

Select page for editing

• Navigate in the left-hand side menu to Content Manager.
• Within Collections, select the sub-item Content pages. If it is not already selected, select it to edit the content pages.
• An overview of the stored content pages is displayed.
• Select the About us page or another page that you want to edit.

​

Edit the page details

• Template name: Only change the name if the template has been changed. Make sure that the corresponding template is available on the server.
• Meta information: Optimize the SEO information (meta title, meta description, meta robots) to improve findability in search engines.
• SEO URL: Specify the URL under which the page can later be accessed.

​

General options for the slider

• Display across the entire screen width: Depending on the storefront design of the shop, you can choose whether the entire slider should be displayed across the entire screen width. This setting applies to the complete slider, not to individual slides.

​

Add slides

• Open slider component: Open the “Slider” component on the editing page.
• Define slides: The individual elements of the slider components are called “slides”. A “slide” is a single part of the slider. Time-controlled or by a shop visitor action, the individual “slides” are later cycled through.
• Add new slide: Press the field with the (+) to add a new slide.
• Set display status: Via “Display status” with the selection “Yes”, the slide is displayed in the slider. With the selection “No”, the slide is not displayed. This way, slides can also be hidden temporarily or for a certain time – and later shown again.
• Add description: Assign a description for this slide that serves as a better overview in the CMS.
• Add link: In the “Link” field, a link can be set. When the visitor clicks the “slide”, they are redirected to this link. The following “link types” are available:
  • Product: Enter a product number to redirect the visitor to the product detail view of this product.
  • Category: Enter a category index to redirect the visitor to the category page of this category.
  • Internal: Specify specific paths or routes that lead to other pages or resources within your online shop.
  • URL: Specify a URL to redirect the visitor to this URL.
• Assign images: Within “Images”, click on the field with the ”(+)”.
  • Six more fields appear, each representing the image to be displayed for the corresponding viewport (XS to XXL, from smartphones to wide screens):
    • XS / SM: Smartphones
      MD / LG: Tablets and smaller laptops
      XL / XXL: Large laptops, desktop PCs, and wide screens
  • For each viewport, select the appropriate image from the CMS media library or add a new image.
• Add more slides: Click ”+ Add entry” to add additional slides to the slider.

​

Edit existing slides

• Navigate to the slides: Navigate to the editing page and there expand the existing slider component. Select the slide to edit and click on the bar with the arrow to expand it.
• Set display status: Via “Display status” with the selection “Yes”, the slide is displayed in the slider. With the selection “No”, the slide is not displayed. This way, slides can also be hidden temporarily or for a certain time – and later shown again.
• Change description: In the “Description” field, you can change the description of the respective slide by clicking in the field. The description serves as a better overview in the CMS.
• Add link: In the “Link” field, the link can be edited. When the visitor clicks the “slide”, they are redirected to this link. The following “link types” are available:
  • Product: Enter a product number to redirect the visitor to the product detail view of this product.
  • Category: Enter a category index to redirect the visitor to the category page of this category.
  • Internal: Specify specific paths or routes that lead to other pages or resources within your online shop.
  • URL: Specify a URL to redirect the visitor to this URL.
• Adjust images: There are several options for adjusting the images of the slide.
  • For example, if you want to remove all images for every screen width at the same time, you have to click on the trash can icon of the “Images” field.
  • If you only want to swap or remove individual images or edit the image, you can use the icons that are located directly next to the respective image.
    • Click the + icon to swap the image with another image from the media library or a newly uploaded image.
    • The “Copy link” option with the link icon copies the image path to the clipboard.
    • Click the trash can icon to remove the image for the respective screen width.
    • Via the pencil icon, you reach the editing mode of the image, where you can adjust the file name, the alternative text, the caption, and the location of the image.

​

Test mode

• Test mode: Before saving, you must specify via the selection “YES / NO” whether the changes should be displayed in test mode or in live mode.

---

​

Editing product sliders using the home page as an example

​

Editing the product slider “Our top sellers”

• Navigate to the product slider: Navigate to the editing page and there expand the product slider component “Our top sellers”.
• Heading: Change the heading by clicking in the field and entering a new one.
• Category index: Before a new category index is written to the field, the existing one must first be deleted, since two different entire categories cannot be displayed in one slider.
• Full screen width: With the “Yes” option, it is specified that the slider extends across the entire screen width – the “No” option ensures that the slider adjusts to the width of the other elements.

​

Editing the product slider (manual) “Our best clothing”

• Navigate to the product slider (manual): Navigate to the editing page and there expand
  the product slider (manual) component “Our best clothing”.
• Heading: Change the heading by clicking in the field and entering a new one.
• Product list: Click in the field and add a new product index or remove a product from the slider by removing the product number.
  Always make sure that there are no duplicate commas, or that a comma is not forgotten between two product numbers, to avoid incorrect displays.
• Full screen width: With the “Yes” option, it is specified that the slider extends across the entire screen width, and the “No” option ensures that the slider adjusts to the width of the other elements.

---

​

Editing a product teaser using the home page as an example

​

Editing the product teaser “Tech novelties”

• Navigate to the product teaser: Navigate to the editing page and there expand
  the product teaser component “Tech novelties”.
• Heading: Change the heading by clicking in the field and entering a new one.
• Product list: Click in the field and add a new product index or remove a product from the teaser by removing the product number.
  Always make sure that there are no duplicate commas, or that a comma is not forgotten between two product numbers, to avoid incorrect displays.

---

​

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.\