Content Editor

Inhaltsverzeichnis

Introduction

With the Content Editor, you can create unique content pages for your online shop in no time at all. In this guide, we explain the Content Editor step by step and finally how to assign the created page in the menu.

Instruction video

In this short video you can see the design of a possible start page with the Content Editor.

Create page

You can create a new page or edit an existing one in the shop administration under Contents -> Pages.

Figure 1: Pages

Content Editor interface

You are now in the Content Editor interface.

Figure 2: Content Editor

Explanation numbers
1 Responsive design	Change the view to see how your site looks for mobile devices. However, you can only partially edit the views independently. For example, you can change the size of an image in the mobile view, but the old size is still displayed in the desktop view. However, you cannot adjust the position of the image for each view.
2 Link	You can customise the page link by clicking on the pencil. If you click directly on the link, you will be taken to the page in the online shop.
3 Undo/Redo	These arrows give you the option of undoing or redoing the last operations.
4 Show auxiliary lines	The guide lines help you to find your way around.
5 Preview	In the preview, you can view your page (including changes that have not yet been saved) from the customer’s perspective.
6 Publish	The page you have created will be saved automatically. When you are ready, you can publish the page here.

Elements

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

Templates

Templates are ready-made elements with images and text that serve as inspiration.

Figure 3: Templates

Layouts

Layouts provide you with a rough structure.

Figure 4: Layouts

You can drag the content directly into the layouts or templates. There is one content each for buttons, image, title, text and video.

So first create your structure from the templates or layouts and then you can fill them with content.

Figure 5: Contents

Element settings

Click on an element to open the element settings on the right. Depending on where you click, other options will open. In the element settings, you can define the box width, adjust the background or define the alignment.

Box / Layout

You can specify the background for each box. To do this, simply click on the background. The element settings will then open on the right. In addition to a transparent background, you have the option of selecting an image, a video or a colour.

Figure 6: Box/Layout

You can also make settings for the smaller box (layout). Click on the background of the layout and you can now make the following settings.

Figure 7: Layout

Format title

The structure of the title is not only important for the appearance, but also for search engine optimisation (SEO).

Please make sure that there is only one H1 heading (title 1) per page!

You can set the titles in the font size:

Figure 8: Font size

Button

You also have various setting options when you click on the button. Here you can define the destination of the button, its size, background, etc

Figure 9: Button

Picture / Video

Click on the image or video and the editing screen will open on the right. Upload the desired image by clicking on the icon in the image.

Figure 10: Picture

The Asset Manager will now open and you can use this wizard to upload the images or select them directly from the product images.

Figure 11: Asset manager

Click on the video element to edit the following settings. You can upload videos from YouTube or Vimeo. Add the link to the video or the video ID below.

Figure 12: Video

Fast processing

In addition to the element settings, you can also edit the content directly on the box. By clicking on the desired content, you can reposition, duplicate or delete the box. You can also adjust the format of the text right here.

Figure 13: Customize title

As soon as you have completed the page, you can now assign it to a menu. Under Contents -> Menu you will find the newly created page under “Newest pages”. You can now select the page, choose the desired menu from the drop-down menu and add the page.

Figure 14: Menu

You assign the fixed pages such as terms and conditions, start page etc. directly in their editing. Go to Contents -> Pages and edit the terms and conditions, for example.

New features from v10

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

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 also be uploaded, there are some great new features:

Let texts and images fly

Now you can add effects to your texts and images.

Figure 15: Effects

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

Embed your own code

HTML and JS source texts are now integrated directly in the content editor. Integration takes place via a new content element.

Figure 16: Code

This is simply dragged onto the page of the content editor. For example, sections of Google Maps, Google reviews, social media feeds or catalogs can be integrated.

Depending on the widget to be integrated, the third-party provider immediately offers a copyable embed code or you can create a widget code using a widget configurator.

A little 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 very much” page

Would you like to draw your customers’ attention to something after the purchase or tell them something?

The order completion page of the order process is now a standard page and can be easily customized in the content editor. Including integration of dynamic elements via “embed your own code”, which offers completely new possibilities.

Figure 17: Thank you very much

The footer, the end of the page of your online store, is also a standard page for newly installed PepperShops that can be edited in the Content Editor. The new footer has a simple and clear design to make navigation more user-friendly.

If you update an existing store, the footer will of course be retained and will not be overwritten.

Examples and inspiration

Figure 18: Example

Figure 19:

Figure 20:

Abbildung 21:

Figure 22:

Further help

Do you need further support? PepperShop provides you with various options.

It often helps to click on the question mark icon in the top right-hand corner of the administration. Here you can get direct help on the topic in question.
Various answers can be found in the FAQ. These can also be accessed in the store administration via Help&News -> Help archive. Or via our homepage https://www.peppershop.com/de/services/support/faq/
In the PepperShop Academy https://www.peppershop.com/de/services/academy/ you can easily and conveniently find various free video tutorials.
We are also happy to help you by e-mail or telephone (CHF 195./h) support@glarotech.ch or +41 71 923 08 58