Content Editor

Introduction

With the Content Editor, you can quickly create unique content pages for your online shop. Content pages are pages such as ‘About us’, ‘Contact’ or ‘Terms and conditions’ – i.e. pages that do not show products, but provide important additional information for customers. In this guide, we explain the Content Editor step by step and finally the assignment of the created page in the menu.

Create page

In the shop administration under “Content” → “Pages” you can create new pages for your shop or edit existing pages.

Possible applications:

• Create your own content such as “About us”, “Contact”, “Shipping information” or individual landing pages.
• Edit existing pages such as the “Home page”, “Terms and conditions”, “Privacy policy” or the “Footer”.

How it works:

1. Select “Create new page” in the menu to create a completely new page.
2. Alternatively, click on an existing page in the list to edit its content.
3. Use the integrated Content Editor to insert texts, links, images or HTML code.
4. Save your changes so that the page is published in the shop.

Content Editor interface

To edit a page, click on the “Pencil icon (“Edit content”) next to the desired page in the “Content” → “Pages” section. This opens the Content Editor, in which you can flexibly adapt content.

Elements

On the right side you will find the elements that can be conveniently placed via drag & drop. There are 3 elements.

Templates

Templates are preconfigured content blocks that consist of text and image elements. They serve as design aids and can be used as inspiration or directly for adoption into your page.

The templates enable you to create appealing layouts without much effort – for example for product presentations, offer sections or info boxes. After inserting, you can individually adapt the content, for example by replacing texts or uploading your own images.

Layouts

Layouts provide you with a predefined structure to arrange content on your page in an organised and clear way.

They serve as a basic framework that, for example, determines whether content is displayed side by side (e.g. in columns) or one below the other.

After inserting a layout, you can fill it with any content elements such as text, images, buttons or HTML modules. The structure helps to design the page layout consistently and appealingly – especially for more extensive pages.

Content

In the Content Editor, you can insert content such as texts, images, buttons or videos directly into previously inserted layouts or templates.

How to proceed:

1. First create the desired structure on your page – either by:
   • Layouts (e.g. single or multi-column sections) or
   • Templates that already contain finished image-text combinations.
2. Then add content. The following content blocks are available to you:
   • Title – for headings or section titles
   • Text – for body text and descriptions
   • Image – for displaying products, logos or backgrounds
   • Video – for embedding external video content (e.g. YouTube)
   • Button – for linked buttons, e.g. “Buy now” or “Learn more”
3. Drag the desired content to the appropriate position within the layout or template.

Element settings

With a click on an element, the element settings open on the right. Depending on where you click, different options open. In the element settings, you can determine the box width, adjust the background or determine the alignment.

Box / Layout

In the Content Editor of 21.Shop, you can set individual backgrounds for each individual box or layout column.

How to adjust the background:

1. Click on the background area of the desired box or layout column.
2. The settings menu for the selected element automatically opens on the right.
3. In the element settings, you have the following options to choose from:
   • Transparent background (default)
   • Coloured background: Select a colour via the colour picker.
   • Image as background: Upload your own image or select an existing one.
   • Video background: Add a video that plays in the background.

Note on layout columns:

You can also make these background settings individually for smaller units within a layout – e.g. individual columns. To do this, simply click directly on the respective column background to display the corresponding options.

Format title

The structure of titles is not only crucial for the visual design of your page, but also for good findability in search engines (SEO).

Important note on H1 heading:

• Use “only one H1 heading (Title 1) per page”. This should describe the “central content of the page” – e.g. the page title or the main topic.
• Further subheadings should be formatted with “Title 2 (H2)" or “Title 3 (H3)" to clearly structure the content.

How to set the title type:

• If you use a “Text block” as a title, you can select the “Font size or format template” in the “Text editing menu”.
• Choose there between the heading levels “Title 1 to Title 6”, depending on the desired hierarchy.

Button

When you click on an inserted “Button” in the Content Editor, a settings area with various options opens on the right side.

The following adjustments are possible:

• Define target: Specify where the button should lead – e.g. to a specific shop page, a product, an external URL or an anchor within the same page.
• Set size: Choose between different button sizes (e.g. small, medium, large), depending on how prominently the button should be displayed.
• Background colour and text colour: You can set both the background colour and the font colour individually to visually adapt the button to your design.
• Text on button: Edit the displayed text directly in the button, e.g. “Buy now”, “Learn more” or “To contact page”.
• Alignment: Specify whether the button should be displayed left-aligned, centred or right-aligned within the section.

These settings enable you to precisely match buttons functionally and design-wise to your shop pages.

Image / Video

Edit or add image:

1. Click on the desired image element within the editor.
2. The “Editing mask” with various settings automatically opens on the right side.
3. To insert a new image or replace an existing one, open the “Asset Manager”:
   • Click on the upload button in the image area.
   • In the Asset Manager, you can upload a new image from your device or select an existing image from your media library.
   • Alternatively, you have the option to take an image directly from your product images.

Edit or add video:

1. Click on the video element you want to edit.
2. Various options are available in the right editing mask.
3. You can embed videos from “YouTube” or “Vimeo”:
   • Simply insert the “Link to video” or the corresponding “Video ID” in the provided field.

With these functions, you can embed visual content specifically and easily into your shop pages – ideal for product presentation or explanatory content.

Quick editing

In addition to the element settings, you also have the option to edit content directly on the page.

The following options are available to you:

1. Reposition content: Click on the desired content to move it to another position via drag-and-drop.
2. Duplicate content: With a click on the content, you can “duplicate” it to create an identical copy.
3. Delete content: If you no longer need content, you can “delete” it by clicking on the corresponding option.
4. Adjust text formatting: To edit text directly, click on the text area. Here you can quickly adjust “Font size”, “Font”, “Colour” and other formatting.

Assign to menu

After you have created your page, you can assign it to a menu.

1. Go to “Content” → “Menu”. Here you will find the newly created page under the “Latest pages” section.
2. Select the page. In the drop-down menu, you can now select the “desired menu” and add the page to this menu.

Assign fixed pages (e.g. Terms and conditions, Home page):

• To assign pages such as “Terms and conditions” or “Home page” to a menu, go to “Content” → “Pages”.
• Select the page (e.g. the Terms and conditions page) and edit it.
• During editing, you can directly assign the page to the corresponding menu.

New features from v10

From version 10 of PepperShop, there are various new features in the Content Editor. The extended functions of the Content Editor help you to create useful content and personalised brand experiences simply and quickly.

In addition to the extended Asset Manager with product images as well as payment and logistics icons, in which the WebP image format, Loon videos, animated GIFs e.g. for cinemagraphs can now be uploaded, there are some great new features:

Animate texts and images

You can now add effects to your texts and images.

Select the desired text and open the “Effect settings”. Simply define from which direction (top, bottom, left, right) the element should be displayed.

Embed own code

HTML and JS source code is now directly embedded in the Content Editor. The integration is done via a new content element.

This is simply dragged onto the page of the Content Editor. This allows, for example, excerpts from Google Maps, Google reviews, social media feeds or catalogues to be embedded.

Depending on the widget to be embedded, the third-party provider immediately offers a copyable embedding code or you can create a widget code with a widget configurator.

Small tip: With “elfsight” you can easily generate widget codes such as Social Feed.

https://go.elfsight.io/click?pid=828&offer_id=3&l=1677843061

“Thank you” page

Would you like to point your customers to something or tell them something after the purchase?

The order completion page of the order process is now a standard page and can be easily designed in the Content Editor according to your wishes. Including integration of dynamic elements via “embed own code”, which offers completely new possibilities.

Flexible footer

The footer, the end of your online shop, is also a standard page for newly installed PepperShops that can be edited in the Content Editor. The new footer is simply and clearly designed to make navigation more user-friendly.

If you update an existing shop, the footer is of course retained and not overwritten.

Further help

If you have any questions or problems, our support team will be happy to help. To do so, open a support ticket:

1. Go to the Swiss21 portal.
2. Click on your profile picture in the top right corner.
3. Click on “Support”.
4. Click on “Contact support”.
5. Fill out the form and our support team will get back to you as soon as possible.

Support opening hours: Monday – Friday I 8:00 a.m. – 12:00 p.m. I 1:30 p.m. – 5:00 p.m.