The shop editor
The new shop from PlentyONE has its own what-you-see-is-what-you-get editor, which you can use to edit your shop pages without any programming knowledge.
|
Editor language
The UI elements of the editor are only available in English. |
1. Structure
The editor consists of three sections:
-
On the left-hand side (orange), you’ll find the design settings for the colour scheme, the fonts and the spacing between the individual blocks of the page.
-
The preview area for the page is located in the centre. Additional page content - so-called blocks - can be added here.
-
On the right-hand side (blue), you’ll find the block-specific settings in which you can change texts or select images.
Each block has a UI element that is displayed when hovering over the respective block with the cursor.
This UI element can be used to access the block settings (edit), move the block on the page or delete the block.
A plus button is displayed above and below each block, with which additional blocks can be added at the selected position.
2. Design settings
Click on the Settings button (tune) in the top left-hand corner of the shop to open the design settings.
There you can select a font for your shop, change the colour scheme of the shop and adjust the spacing between the shop blocks.
Save (save) your settings after you’ve made any changes.
2.1. Fonts
In the font settings, you set a font that is used globally for all shop pages.
The shop supports Google Fonts.
The Google Fonts are downloaded during the shop build process, which means that the shop is not connected to Google during live operation.
Click on the selection field to expand the drop-down list for fonts.
The selection field also serves as a search field with autocomplete.
2.2. Colours
In the colour settings, you set the primary colour and secondary colour of your shop.
These two colours form the basis of your shop’s colour scheme. Ten hues are generated from both colours, which are used in different places in the shop to provide a dynamic colour scheme for your shop.
You have two options for selecting the colour: Enter a hexadecimal code in the respective input field or click on the colour preview in the input field to open the colour selection including a colour picker.
You will see the changes made to the colur settings immediately in the editor.
3. Page body
The centre area of the preview displays your homepage content. There, you can add or move new blocks or open the block settings.
3.1. Add blocks
When hovering over a content block with the cursor, plus buttons (add) are displayed above and below this block, with which you can insert a new block at the respective position.
Clicking one of the plus buttons opens the block selection on the left-hand side:
You can choose from the following content blocks:
-
Image banner 1-3 (a background image with text superimposed on it in three different formats)
-
Image with text (two blocks next to each other)
-
Text (one text block without image)
-
Products (a list of items)
-
Form (e.g. newsletter registration)
Click on the plus button in the bottom right-hand corner of a block to insert this block at the position at which you opened the block selection.
3.2. Moving blocks
When hovering over a content block with the cursor, a UI element is displayed in the top right-hand corner. In this UI element, you will find two arrow buttons (arrow_upward and arrow_downward). If you click on one of these arrows, the block you are currently on will be positioned above or below the next content block.
3.3. Block settings
When hovering over a content block with the cursor, a UI element is displayed in the top right-hand corner.
Clicking on the pencil button (edit) opens the settings for the respective block on the right-hand side.
These settings are block-specific. They contain different options and you can carry them out per block - i.e. not globally.
The block settings have different setting areas (e.g. Image, Text and Button), which you can expand by clicking on the title of the area.
4. Overview of the various block settings
4.1. Image banner
The image banner offers an element that displays a large image, on which you can display text.
You have the option to create several slides for the banner that users can switch via clicking.
Add slides, carry out image settings and edit text in the block settings.
4.1.1. Editing slides
A slide is a clickable element that consists of a large image and several text elements. If several slides are created, customers can switch between them by clicking on the navigation arrows on the left and right of the image. Its possible to carry out text and image settings for every slide separately. Select the slide you want to configure in the block settings by clicking on Slide 1, Slide 2, etc:
Add further slides by clicking add.
4.1.2. Arranging slides
Click on more_horiz to open the context menu. In this menu you are able to rearrange, add and delete slides:
Click on drag_indicator to drag a slide to a different position, displaying it earlier or later in the slide show.
Delete a slide by clicking delete in the corresponding line.
Click on add to add a slide.
This slide will be displayed as an empty slide as the final list entry.
4.2. Image settings
You have the option to set the image settings for every slide separately.
4.2.1. Image sizes
There are four different input fields to provide slider images for different devices:
-
XL Desktop (recommended image size: 1920 x 1080 px)
-
L Desktop (recommended image size: 1024 x 576 px)
-
M Tablet (recommended image size: 768 x 432 px)
-
S Mobile (recommended image size; 320 x 320 px)
You save images for slides by putting the image URL (stored in the webspace for example) in the corresponding input field. All conventional formats are supported. Shop also supports modern formats, such as AVIF and WebP.
4.2.2. Image brightness
Use the toggle to adjust the brightness of the image. Alternatively, enter a decimal number between 0,01 and 1 to adjust the brightness precisely. This setting affects all four image sizes.
4.2.3. Alternative text
Enter an alternative text in the Alt input field that is used for the selected image. Alternative text is an important tool to ensure the accessibility of your shop. These texts should be short and concise and not be longer than 80 to 100 characters. See our shop best practice.
4.2.4. Text settings
Enter text snippets in the text settings that are displayed in different places of the slide.
There are four different text snippets (pre-title, title, subtitle and description) available.
The settings for Button are described further below.
4.2.4.1. Title
The text snippets pre-title, title and subtitle are displayed one below the other on the slide.
Title has a bigger font size compared to the other two.
If you leave an input field empty the respective title won’t be displayed.
Titles do not have a character limit.
You can only enter plain text.
The input fields do not support HTML formatting.
4.2.4.2. Description
Description will be displayed as normal text between Subtitle and Button.
Contrary to the title input fields, the description input field supports HTML formatting.
Descriptions do not have a character limit.
4.2.4.3. Text color
Enter the hexadecimal code in the text color input field to color the text of the different titles and description. Alternatively, click on colored square on the right of the input field top open the color selectioon.
4.2.4.4. Text background
Activate the Textbox Background toggle to display a colored background in the text box and further options in the block settings.
The text box scales with the entered text.
Similar to text color, you can select the color either by entering the hexadecimal code in the Textbox color input or the color selection.
Adjust the transparency of the text box by using the Textbox Opacity toggle.
4.2.4.5. Text alignment
Select the text alignment on the slides via three alignment options.
Textbox Alignment (x) determines where on the slide along the x-axis the text box is displayed.
Textbox Alignment (y) determines where on the slide along the y-axis the text box is displayed.
Text Alignment (y) determines if the text in the text box left-aligned, in the middle or right-aligned.
4.2.5. Button settings
In the Button area you adjust the look and functionality of the button that is on the slide.
In the Label input field you determine the button name.
If this input field is empty, no button will be displayed on the slide.
In the Link Target input field you determine where users are redirected to, when clicking the link.
Either enter the URL or provide a category path of your shop (for example: /category31/example-item_133).
In the Variant area you determine the design of the button. Primary turns the button into the primary colour of the shop and the Label will be displayed in white. Secondary inverts the button, only the Labl and frame will be displayed in the primary colour. The rest of the button will be transparent and only be coloured when hovered over.