Skip to main content

Setting up the ShopBuilder

The ShopBuilder is plentymarkets’ modular construction kit for quickly setting up your Ceres plentyShop via Drag&Drop. You require no programming skills.
The ShopBuilder consists of 2 user interfaces: the content manager and the editor. The content manager is the user interface in which you manage ShopBuilder categories and individual contents for these categories, e.g. for creating season-dependent homepages. The editor is the view in which you design individual pages and carry out the settings of the widgets on your pages.

Requirements for the ShopBuilder
  • In order to use the ShopBuilder you must have a valid SSL certificate.

  • The respective store must not be blocked.

  • The ShopBuilder requires Ceres version 2.8.1 or higher. In case you are using an older version of the plugins Ceres and IO, you can get more current versions in the plentyMarketplace.

  • If you want to display the homepage you create with the ShopBuilder in your online store, you need to activate the option Show ShopBuilder homepage in the Plugins » Plugin overview » Ceres » Configuration » Homepage menu and deactivate the option Show default homepage.

Functionality of the ShopBuilder

Currently, it is only possible to create and edit the homepage, the checkout, the My Account area, and content categories of your Ceres plentyShop with the ShopBuilder. The ShopBuilder’s functionality is constantly expanded. In the next step, we will make it possible to manage and edit the single item view via the ShopBuilder.

1. The content manager

You open the content manager view by opening the CMS » ShopBuilder menu. The content manager serves to manage ShopBuilder categories and adding new contents. This section provides an overview over the functions of the content manager; the individual functions are elaborated later on.

ContentManager UI
Figure 1. Category view of the ShopBuilder
Table 1. Elements of the content manager
Mark Element Explanation

1

Open setting

Opens the interface for linking categories to the Ceres plugin. Here, you link the categories you created for displaying information about shipping costs, the checkout and the My Account area, so that these categories are correctly connected to the Ceres plugin.

2

Regenerate contents

If an update of the Ceres plugin includes changes to already existing widgets, this button serves to generate the contents of these widgets again, so that your ShopBuilder contents are displayed correctly after installing the update. If it is necessary to regenerate the contents, we will include a warning in our ink:https://github.com/plentymarkets/plugin-ceres/blob/stable/meta/documents/changelog_de.md[Changelog^] under the header TODO.

3

Select a plugin set

You can create and manage different ShopBuilder contents for different plugin sets. Select the plugin set from the drop-down list for which you want to edit the ShopBuilder contents. You should always make sure that the correct plugin set is selected when you edit a category or create a new content.

4

Select a language

You can create and manage different ShopBuilder contents for different languages. Select the language from the drop-down list for which you want to edit the ShopBuilder contents. It is possible to create homepages with different languages independently of one another. You should always make sure that the correct language is selected when you edit a content. All plentymarkets system languages are available. The language has to be activated in the Plugins » Plugin overview » Ceres » Configuration » Languages menu.

5

Select client (store)

If you operate more than one online store via a single plentymarkets system, you can select the client for which you want to edit contents from the Select client drop-down list.

6

Category selection

The category tree on the left side of the category view lists the categories that you can use in the ShopBuilder. Usually, you would have at least one category for the homepage, the My Account area, the checkout, and your shipping cost information. You can also create categories for content pages, such as a About us page. As soon as item and category pages can be managed via the ShopBuilder, this list will also include categories of the type item.

7

Header elements

In this area, you create and edit new contents for the header. At the moment, the header you create is globally active for all pages that have been created with the ShopBuilder. The same thing applies to the footer elements. *Note*: This section is collapsed by default.

8

New

Clicking the New button creates a new page for the currently selected category. You can select one of the 3 types Content, Checkout, and My Account. Content pages are used for the homepage and additional static pages, such as a About us page. You select the type Checkout for setting up your order process. The type My Account is used for setting up your customer area. After clicking New, you can enter a name for the page and select whether you want to use a preset for the page.

You create new contents for the header and footer in the same way.

9

Content

Every tile represents a page that you created. You need to activate the created page if you want to display it in the online store. You activate a page by clicking the eye icon on the page’s tile. The tooltip reads activate upon mouseover.

1.1. Creating and editing categories with the ShopBuilder

The category tree on the left side of the content manager lists the categories of the online store. Here you can create new categories as main or sub categories. In the Edit category window, you can carry out a number of settings, which are explained in Table 2.

Creating and editing categories with the ShopBuilder:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. At the bottom of the category tree, click on the plus Create new category.
    → The Create new category window opens.

  3. Enter a name and select Main page for a main category or Subpage for a subcategory.

  4. If you select subcategory, the category selection opens, via which you can select the superordinate main category.

  5. Click Create.
    → The new category has been added to the category tree and the window Edit category opens.

  6. Carry out the settings. Pay attention to the information given in Table 2.

  7. Save the settings.

Table 2. Editing a category
Setting Explanation

General settings

Client (store)

Select the client for which the category is created. You can activate a category for multiple clients at the same time. Categories that are activated for a client are highlighted in yellow in the category tree. If a category for the selected client is inactive, it is coloured grey in the category tree. If no name or no language is given for a category, the category is displayed in italics.

Show in sitemap

Activate to include the category in the sitemap.

Show in link list

Activate to include the category in the link list.

Client (store) specific settings

Client (store)

Select the client from the drop-down list for which you want to carry out client-specific settings.

Name

Enter a name for the category. If no name is given for a category, the category is displayed in italics.

URL

Enter a URL for the category. Every category requires a unique URL.

Canonical

If necessary, enter the URL of a category with the same content to prevent duplicate content.

Position

Enter a number to specify in which order the categories and subcategories should be displayed in on the same level.

Meta title

Enter the meta title. SEO tip: Pay attention to the length of the title.

Meta description

Enter a meta description (max. 350 characters). The meta description is analysed by search engines. As such, it is especially important for the homepage. SEO tip: The meta description should contain the most important content in one sentence.

Meta-Keywords

Enter key words that potential clients are likely to enter into search engines and that relate to the content of the category.

Meta robots

Choose between all, index, nofollow, noindex, and nofollow, noindex. Values of the meta element Robots are analysed by search engine crawlers. These values tell the crawler how to deal with the page and any links on that page.
all = Include the website of the category in the search engine index and follow links on the page.
index = Include in search engine index.
nofollow = Do not follow links on the page.
noindex = Do not include in search engine index.
nofollow, noindex = Do not follow links and do not include webpage in the search index.

1.2. Deleting categories in the ShopBuilder

You can delete categories in the content manager view. Please be aware that deleting a category also deletes the contents that are linked with this category.

Deleting a category:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. In the category tree on the left, click on the edit symbol in the row of the category you want to delete.
    → The Edit category window opens.

  3. Klick on the delete button.
    → The Delete category window opens.

  4. Click on Delete category.
    → The category is deleted.

1.3. Linking categories with the Ceres plugin

You need to link a few categories in a separate step with the Ceres plugin, so that these categories work properly in the online store. At the moment, you need to link the categories for the checkout, the My Account area, and the information about shipping costs. Proceed as follows to link the categories:

Linking a category with Ceres:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Click on Open settings on the left in the toolbar.
    → The interface for linking category opens.

  3. Click one of the rows, e.g. Category of “My Account”.
    → The category selection opens.

  4. Select the category that you created for the corresponding section.
    → The selected category is highlighted in blue.

  5. Click Select at the lower end of the category selection.
    → The category picker collapses.

  6. Save the settings.

1.4. Creating content in the ShopBuilder

You create new contents for your categories in the content manager view of the ShopBuilder. You can then edit these contents in the editor view. A content is essentially a single page design. You can create many different contents per category and activate and deactivate them as needed. This can be helpful if you want to design season-dependent homepages or plan special offers far ahead of time.
You can only activate one content per category at a time.

Types of content

You select one of 3 types when you create a new content: - Contents of the type Content are used for the homepage and additional static pages, such as a company history or your shipping cost information.

  • You select the type Checkout for setting up your order process.

  • Contents of the type My Account are used for the customer area of your online store.

Creating a content:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Select the category for which you want to create a content in the category tree on the left.

  3. Click on the new tile.
    → The window Create new page opens.

  4. Select the content type.
    → Select content for the homepage and static pages, checkout for your order process, or My Account for your customer area.

  5. Enter a name for the content.

  6. Select a preset if necessary.

  7. Save the settings.
    → The newly created page is displayed in the overview.

1.4.1. Presets for contents of the type content, checkout and My Account

We provide default presets for all 3 types of content which you can rely on when designing your contents. These presets are a great starting point from which you can customise your online store. The following widgets are part of the corresponding preset:

Content:

  1. Title bar

Checkout:

  1. Text

  2. Separator line

  3. Address selection

  4. Shopping cart preview

  5. Totals

  6. Shipping method selection

  7. Payment method selection

  8. Notes and requests

  9. Purchase button

  10. Cancel payment button

  11. Shipping information checkbox

  12. Terms and conditions checkbox

My account:

  1. Text

  2. Separator line

  3. Welcome

  4. Address selection

  5. Logout button

  6. Account settings

  7. Bank details

  8. Order history

  9. Return history

1.5. Creating a header or a footer with the ShopBuilder

In the same way, you can create contents for the header and footer in the content manager view of the ShopBuilder. At the moment, the header and the footer are globally effective for the whole online store.

Creating a header or a footer in the ShopBuilder:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Click New in the section Header elements or Footer elements.
    → The window Create new page opens.

  3. Enter a name for the content.

  4. Select a preset for the header or the footer if necessary.

  5. Save the settings.
    → The header or the footer has been created.

1.6. Deleting a page in the ShopBuilder

You can remove contents you created in the ShopBuilder. Please be aware that the content will be irretrievably lost.

Deleting a content:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Move the mouse cursor over the page you want to delete.

  3. Click on the button Additional options.
    → The context menu opens.

  4. Click on Delete.
    → The Delete window is opened.

  5. Click Delete to, you know…​, delete the content.
    → The content is deleted.

1.7. Renaming contents in the ShopBuilder

You can always rename your contents in the ShopBuilder.

Renaming content:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Move the mouse cursor over the page you want to delete.

  3. Click the button Additional options.
    → The context menu opens.

  4. Click Rename.
    → The Rename window opens.

  5. Enter a new name in the field Content name.

  6. Save the settings.

1.8. Duplicating content

You can duplicate contents in the content manager view. That way, you can quickly make small changes to your contents and can copy your contents to other plugin sets or other languages.

Duplicating content:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Move the mouse cursor over the page you want to delete.

  3. Click on the button Additional options.
    → The context menu opens.

  4. Click on Duplicate content.
    → The window Duplicate content opens.

  5. Carry out the settings. Pay attention to the information given in Table 3.

  6. Click on Duplicate content.
    → The content is duplicated.

Table 3. Duplicating content
Setting Explanation

New name

Here, the initial name with the addition (Copy) is entered by default. You can rename the duplicated content.

Select a plugin set

Select the plugin set for which the content is duplicated.

Select a language

Select the language for which you want to duplicate the content.

Category

Select the desired category for the duplicated content.

1.9. Activating contents

You can only activate one content per category at a time. A content has to be activated to appear in the online store. Active contents are highlighted in blue in the content manager view.

Activating contents:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Move the mouse cursor over the page you want to activate.

  3. Click on the eye symbol. The corresponding tooltip reads activate.
    → The content is activated and is now highlighted in blue.
    → Activating one content automatically deactivates another content.

2. The editor view

The ShopBuilder’s editor view is opened by clicking any content in the content manager view. The editor serves to edit the layout of your online store pages. There, you can add new widgets and carry out widget settings. The following section provides an overview over the functions of the editor.

editor UI
Figure 2. Editor view of the ShopBuilder
Table 4. Elements of the editor
Mark Setting Explanation

1

Widget selection

You can access the widget selection on the left side of the editor. There, you will find all widgets that are available for the current area (body, header, footer) and the current page (content, checkout, My Account). The widgets in the widget selection are grouped into sections. These sections are collapsed by default and can be expanded by clicking the section title to reveal the widgets of the corresponding sections.

2

Widgets

Every sub-section of the widget selection contains widgets that fulfil a very specific purpose. You add widgets to the page by clicking on a widget in the selection and dragging it onto the body area (5). You can find a list of all widgets and their settings below.

3

Toolbar

The toolbar contains the Save button, the Reset to last save button, the View selection, and the Design settings.

4

Header area

In the editor view, the three areas header, body, and footer are separated from one another, because a number of widgets are only available for one of these areas. The page body is separated from the header and footer by dotted lines. You can switch the corresponding area by double-clicking another area. Header and footer are globally active; changes you make to the header and footer affect the rest of your online store.

5

Body area

The area between header and footer constitutes the body area of your page. The page body is not globally active. Drag widgets from the widget selection to this area in order to add them to your page.

6

Widget settings

Most widgets have additional settings that can be opened by clicking the gear wheel button. The widget settings are then displayed on the right side of the editor view. Widget settings are carried out for each individual widget; changes to one widget do not affect another widget of the same type.

7

Delete widget

You can delete a widget by clicking Delete widget.

2.1. Widgets

The following section elaborates on all currently existing ShopBuilder widgets. The descriptions of the widgets are sorted by category and contain the widget type as well as the various widget settings.

2.1.1. Header widgets

The following widgets can only be used in the header area of a page. However, you can also use most other widgets, that are not specifically labelled as header widgets, in the header, even if they are not listed in this category.

Breadcrumb navigation

This widget provides the breadcrumb navigation that helps your customers navigate to the homepage and other levels of your online store. Click Edit to carry out the widget settings.

Table 5. Settings breadcrumb navigation
Setting Explanation

Fix when scrolling the page

Activate to always display the breadcrumb navigation when users scroll through the page.

Display on homepage

Activate to display the breadcrumb navigation on the homepage.

Display in My Account area

Activate to display the breadcrumb navigation in the My Account area.

Display in checkout

Activate to display the breadcrumb navigation in the checkout.

Display on content categories

Activate to display the breadcrumb navigation on category pages of the type Content.

Category navigation

This widget provides the category navigation. Click Edit to carry out the widget settings.

Table 6. Settings category navigation
Setting Explanation

Fix when scrolling the page

Activate to always display the breadcrumb navigation when users scroll through the page.

Style of the category navigation

Select whether the category navigation is displayed in its normal layout or in the form of a mega menu.

Category levels in mega menu

Select whether the mega menu displays 2, 3, or 4 category levels. This setting is only applicable if mega menu has been selected as the Style of the category navigation.

Number of categories

Enter the number of categories to be displayed in the individual levels of the mega menu. This setting is only applicable if mega menu has been selected as the Style of the category navigation.

Company logo

Select the image file that you want to display as your company logo in the upper left corner of the online store. The common image formats (PNG, JPG, etc.) are applicable.

Top bar

This widget provides a top bar for the header. Click Edit to carry out the widget settings.

Table 7. Settings top bar
Setting Explanation

Fix when scrolling the page

Activate to always display the breadcrumb navigation when users scroll through the page.

Search display

Select whether the search is always displayed, is hidden by default or is not displayed at all.

Display item images in search recommendations

Activate to display item images in the search recommendations.

Item search: forward to item view

Activate to forward customers directly to the single item view if they click a suggested search result.

Display customer login

Activate to display the login button in the top bar.

Display customer registration

Activate to display the customer registration in the top bar.

Display language selection

Activate to display the language selection in the top bar. Languages you want to make available to your customers have to be activated in the Languages tab of the Ceres configuration.

Display country of delivery selection

Activate to make the selection of the country of delivery available by clicking the flag symbol in the top bar.

Display currency selection

Activate to make the currency selection available by clicking the flag symbol in the top bar. Currencies you want to make available to your customers have to be activated in the Currencies tab of the Ceres configuration.

Display wish list

Activate to include a link to the wish list in the top bar.

Display shopping cart preview

Activate to display the shopping cart symbol in the top bar. Clicking the shopping cart symbol displays the shopping cart preview.

Show shopping cart information

Select whether the value of items, the quantity of items, or a combination of both is displayed in the shopping cart preview.

2.1.2. Structure widgets

Structure widgets serve to structure the layout of your pages. They do not contain own content but can be filled with other widgets. Structure widgets can also be filled with other structure widgets in order to enable a large number of possible layout options.

Grid with 4 columns

This widget provides a structure element with 4 columns. The 4 columns are displayed next to one another in the ratio 1:1:1:1. This widget has no other settings.

Grid with 3 columns

This widget provides a structure element with 3 columns. The 3 columns are displayed next to one another in the ratio 1:1:1. Click Edit to open the widget settings.

Table 8. Settings 3 column grid
Setting Explanation

Layout

Select a layout option. This option determines the size and arrangement of the columns:

30%:30%:30% = The 3 columns are displayed next to one another in the ration 1:1:1.
50%:25%:25% = The 3 columns are displayed next to one another in the ration 2:1:1.
25%:50%:25% = The 3 columns are displayed next to one another in the ration 1:2:1.
25%:25%:50% = The 3 columns are displayed next to one another in the ration 1:1:2.
66%:33% (stacked) = The columns are displayed in the ratio 3:1. The 2 widgets on the right side are stacked on top of one another.
33%:66% (stacked) = The columns are displayed in the ratio 1:3. The 2 widgets on the left side are stacked on top of one another.

Grid with 2 columns

This widget provides a structure element with 2 columns. The 2 columns are displayed next to one another in the ratio 1:1. Click Edit to open the widget settings.

Table 9. Settings 2 column grid
Setting Explanation

Desktop layout

Select a layout option for the desktop view. This option determines the size and arrangement of the columns:

50%:50% = The 2 columns are displayed next to one another in the ration 1:1.
66%:33% = The 2 columns are displayed next to one another in the ration 3:1.
33%:66% = The 2 columns are displayed next to one another in the ration 1:3.
40%:60% = The 2 columns are displayed next to one another in the ration 2:3.
60%:40% = The 2 columns are displayed next to one another in the ration 3:2.
75%:25% = The 2 columns are displayed next to one another in the ration 4:1.
25%:75% = The 2 columns are displayed next to one another in the ration 1:4.
Stacked = The 2 columns are displayed above one another in the ratio 1:1.

Tablet layout

Select a layout option for the tablet view. This option determines the size and arrangement of the columns:

50%:50% = The 2 columns are displayed next to one another in the ration 1:1.
66%:33% = The 2 columns are displayed next to one another in the ration 3:1.
33%:66% = The 2 columns are displayed next to one another in the ration 1:3.
40%:60% = The 2 columns are displayed next to one another in the ration 2:3.
60%:40% = The 2 columns are displayed next to one another in the ration 3:2.
75%:25% = The 2 columns are displayed next to one another in the ration 4:1.
25%:75% = The 2 columns are displayed next to one another in the ration 1:4.
Stacked = The 2 columns are displayed above one another in the ratio 1:1.

Mobile layout

Select a layout option for the mobile view. This option determines the size and arrangement of the columns:

50%:50% = The 2 columns are displayed next to one another in the ration 1:1.
66%:33% = The 2 columns are displayed next to one another in the ration 3:1.
33%:66% = The 2 columns are displayed next to one another in the ration 1:3.
40%:60% = The 2 columns are displayed next to one another in the ration 2:3.
60%:40% = The 2 columns are displayed next to one another in the ration 3:2.
75%:25% = The 2 columns are displayed next to one another in the ration 4:1.
25%:75% = The 2 columns are displayed next to one another in the ration 1:4.
Stacked = The 2 columns are displayed above one another in the ratio 1:1.

Sticky container

Provides a structure element which has a fixed position and is thereby always visible when scrolling the page. The sticky container can be filled with other structure elements or widgets. The sticky container itself has no further settings.

Tabs

This widget provides a structure element, with which you can group other widgets together via tabs. Click Edit to carry out the widget settings.

Table 10. Settings tabs
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the tab titles in the widget. You define the colour options in the Design menu.

Tab title

Enter a title for the tab. “Tab 1” is the default name.

Add new entry

Click in the plus button to add a new tab to the widget.

Remove entry

Click on the minus button to remove the corresponding tab from the widget.

Separator line

This widget provides a separator line with which you can section off certain parts of the page. Click Edit to carry out the widget settings.

Table 11. Settings separator line
Setting Explanation

Top margin

Select the top margin.

Bottom margin

Select the bottom margin.

2.1.3. Text widgets

This widget category lists all widgets that process text in any form.

Title bar

This widget provides a text box for the title of your online store. Click Edit to carry out the widget settings. You can open the inline text editor by clicking the pen icon on the widget. In this editor you can edit and format text directly in the widget. You can only enter plain text; if you want to enter HTML, please use the code widget.

Table 12. Settings title bar
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the title bar. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Code

This widget provides a text box with which you can enter HTML and Javascript via inline editing. Click the </> button to open the code editor. Click Edit to carry out the widget settings.

Table 13. Settings code widget
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

If you want to include Javascript scripts in the online store, you need to use a <script2> tag in the code widget. This tag functions like a common <script> tag.

Text

This widget provides a text box. Click Edit to carry out the widget settings. You can open the inline text editor by clicking the pencil icon on the widget. In this editor you can edit and format text directly in the widget. You can only enter plain text; if you want to enter HTML, please use the code widget.

Table 14. Settings text widget
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

List

This widget provides a list. This widget is empty by default. Click Edit to carry out the widget settings.

Table 15. Settings list widget
Setting Explanation

List title

Enter a title for the list. The title is displayed above the list entries on the left.

Icon

Select an icon from the drop-down list. The title is displayed to the left of the list entries on the left. You can only set the icon for the entire widget, not for the individual list entry. The default value is none.

Centre list

Activate to place the list in the centre of the widget. If this option is deactivated, the list is displayed on the left side.

Displayed text

Enter the text you want to display. This text is the content of the list entry.

URL

Select a URL to which the list entry links. You can select one of 4 link targets:

File (webspace) = Click Select file to choose a file to which you want to link.
External link = Enter the external URL to which the list entry links.
Category = Select a category via the category selection to which the list entry links.
Variation ID = Enter the variation ID to which the list entry links.

If you do not want to link to a target, leave the selection empty.

Open in new tab

Activate to open the link target in a new browser tab after clicking the list entry. This setting only applies if a link target has been defined in the URL field.

Add new entry

Click the plus button to add a new list entry. You can set the text, the URL, and the option open in new tab for each list entry individually.

Remove entry

Click the minus button next to the input field Text to remove the corresponding list entry.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

FAQ

This widget provides a text box with which you can display frequently asked questions in your online store. The corresponding answer is displayed after clicking the question. Click Edit to carry out the widget settings:

Table 16. Settings FAQ widget
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Question

Enter the text for your FAQ question. The corresponding answer is displayed after clicking the question.

Answer

Enter the answer for the FAQ question. The text editor provides the most important formatting options.

Add new entry

Click the plus button to add another question. Enter the text for each new question and answer.

Remove entry

Click the minus button next to the input field Question to remove the corresponding question.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.4. Image widgets

This widget category lists all widgets that are available for displaying images in your online store.

This widget provides the image carousel. Click Edit to carry out the widget settings.

Image box

This widget provides an image box in which you can display individual images that can link to categories or variations. Click Edit to carry out the widget settings.

Table 18. Settings image carousel
Setting Explanation

Appearance

Select a colour from the drop-down list. This determines the colour of the text box inside the image box. You define the available colour options in the Design menu.

Aspect ratio

Select the aspect ratio. Select the aspect ratio from the drop-down list that you want to use for e.g. upright images. Please make sure that the images you use are fitted for the selected aspect ratio. If you select the option automatic, the images scale in correspondence to the screen size, as is described here.

Box style

Select the relation between image and text in the widget.

Image and text (full width) = The text is displayed as a footer of the image; the width corresponds to the width of the image.
Image and text (small) = The text is displayed in a small box in the lower left corner of the image box.
Image and text (large) = The text is scaled to almost cover the entire image box.
Image without text = The image is displayed without a text box.

Image size

Select whether the image is displayed fullwidth or scales according to the height.

Source

The source serves as both the image source and a link target.

File (webspace) = Click Select file to select a file to which you want to link.
External link = Enter the external URL to which you want to link. The external URL has to begin with http or https.
Category = Select a category via the category selection to which you want the image to link. The image that is displayed is the first image stored in the Documents tab of the selected category.
Variation ID = Enter the variation ID to which the image should link. The item image is displayed.

Open in new tab

Activate to open the link target in a new browser tab after clicking the image box. This setting only applies if a link target has been defined in the URL field.

Custom title

Activate to enable inline editing for the text box. If this option is active, you can click the pencil button on the widget to directly edit the text in the widget.

Image selection

Select an image file from your webspace. The image selection overwrites the category or variation image. That way, you can display images in the carousel that you do not use for items or categories. Use the image selection to store an image for a file (webspace) or an external link.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.5. Item widgets

This widget category lists all widgets that serve to display item date in the online store.

Item list

This widget provides item lists. Click Edit to carry out the widget settings.

Table 19. Settings item list
Setting Explanation

Appearance

Select a colour from the drop-down list. This determines the colour of the list title as well as the buttons on the item tile. You define the available colour options in the Design menu.

Type of title

Select either default title, custom title, or no title. The colour of the title depends on the selected appearance.

Default title = This option draws on already existing titles. If a category is set as the source, the category name is used as the default title. If a variation ID is set as the source, the variation name is used as the default title.
Custom title = If you select this option, the additional input field image title is displayed. Enter the text you want to use as the image title in this field.
No title = Select this option to hide the image title.

Item list type

Select which type of item list you want to use for your list:

Category items = Select this option to generate a list consisting of items of a single category. If this option is active, the additional field category is displayed in the widget settings. Clicking this field opens the category picker. Select the desired category and confirm the selection at the lower end of the
Last seen = Select this option to generate an item list that consists of items that the customer visited before.
Items with tags = Select this option to generate a list of items with specific tags. The input field tags is displayed below the current input field. If you want to enter multiple tag IDs, make sure that they are separated by commas.
Manufacturer = Select this option to generate a list of items that share a manufacturer. If you select this option, you can pick the manufacturer in the manufacturer field.

Item sorting

Select the sorting option according to which the item list should be sorted.

Maximum number of items

Enter the maximum number items that are listed.

Number of visible items

Enter the number of items that should be displayed next to each other in a row.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Live shopping

Provides a container for live shopping items. Click Edit to carry out the widget settings. Important: To use live shopping, you must have created at least one live shopping profile. Furthermore, you must have created a purchase price of the price type Special offer.

Table 20. Settings live shopping
Setting Explanation

Live shopping selection

Select one of 10 possible live shopping profiles that are set up in the System » System settings » Client » Global » Live shopping menu.

Sorting

Select the sorting option by which the variation is selected that is displayed as the first variation.

Show timer

Activate the option to show a running countdown for the live shopping offer.

Show time-dependent progress bar

Activate this option to show a progress bar below the time countdown.

Show stock

Activate to show the remaining stock.

Show stock-dependent progress bar

Activate this option to show a progress bar below the stock countdown.

Show strikethrough price

Activate the option to display the RRP in the widget next to the special offer. You need to set up at least the RRP and one additional purchase price of the type special offer.

Image selection

Select the image file from your webspace you want to display in the live shopping container. It replaces the variation image.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.6. Customer data

This widget category lists all widgets that are used for displaying and managing customer data.

Welcome

This widget provides a text box for welcoming your customers to your My Account area. Click Edit to carry out the widget settings.

Table 21. Settings welcome
Setting Explanation

Form of address

Select the form of address you want to use:

. First and last name: Displays the text “Hello, John Doe”.
. First name: Displays the text “Hello, John”.
. Address and last name: Displays the text “Hello, Mr/Ms/Mx Doe”.
. Email: Displays the text “Hello, John@Doe.com”.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Address selection

This widget provides the address selection with which customers can enter their delivery and invoice address in the checkout and My Account area. Click on the pencil button on the widget to open the inline editor. That way, you can edit the text directly in the widget’s editor window. Click Edit to carry out the widget settings.

Table 22. Settings address selection
Setting Explanation

Appearance

Select a colour from the drop-down list. This determines the colour of the New address button. You define the available colour options in the Design menu.

Preselected form of address

Select the option you want to preselect from the address drop-down list. We added the option Mx for diverse, e.g. non-binary, genders. Select company for your B2B customers. You can adjust the terms in the CMS » Multilingualism menu.

Type of address

Select invoice or delivery address.

Address format

Select DE or UK. Depending on which address format you select, different address fields can be displayed and configured as required fields.

Display input fields for invoice and delivery address

Select the address fields that are displayed to your customers when they enter their address.

Mandatory fields for invoice and delivery address

Select the address fields that your customers must fill out before they can place an order. If these fields are not filled in when the customer clicks the purchase button, the order cannot be placed.

The following address fields are available for the address selection:
Company: Provides the input field Company.
Contact person: Provides the input field Contact person. It is only used for B2B customers.
VAT nr.: Provides the input field VAT Nr..
Form of address: Provides the input field Form of address. The available options are Mr, Ms and Mx. These options can be edited in the CMS » Multilingualism menu.
Title: Provides the input field Title.
Date of birth: Provides the input field Date of birth.
Name suffix: Provides the input field Name suffix.
Phone: Provides the input field Phone.
Additional address information 1: Provides the input field Additional address information 1.
Additional address information 2: Provides the input field Additional address information 2.
State: Provides the input field State.
Address 2: Provides the input field Address 2. This is used for the address format UK.
Address 3: Provides the input field Address 3. This is used for the address format UK.
Address 4: Provides the input field Address 4. This is used for the address format UK.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.7. Shopping cart

This widget category lists all widgets that are available for displaying shopping cart information in your online store.

Shopping cart content

This widget provides an overview over the items that are currently in the customers shopping cart. The shopping cart content is not rendered in the editor view of the ShopBuilder and can therefore not be displayed. Click Edit to carry out the widget settings.

Table 23. Settings shopping cart content
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Coupon input

This widget provides an input field via which your customers can redeem coupon codes. Click Edit to carry out the widget settings.

Table 24. Settings coupon input
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Totals

This widget provides an overview over the totals, calculated on the basis of the items that are currently in the customer’s shopping cart. Click Edit to carry out the widget settings.

Table 25. Settings totals
Setting Explanation

Show price information

Select which Price information is displayed in the totals overview.

Available price information:
Value of items (net)
Value of items (gross)
Rebate
Shipping costs (net)
Shipping costs (gross)
Promotional coupon
Gift card
VAT
Totals (net)
Totals (gross)
Outstanding amount

2.1.8. Checkout widgets

This category lists all widgets that are necessary to set up your order process.

Shipping method selection

This widget provides the selection of available shipping methods in the online store. This widget is limited to 1 per page. Click on the pencil button on the widget to open the inline editor and edit the title directly in the widget. Click Edit to carry out the widget settings.

Table 26. Settings shipping method selection
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Payment method selection

This widget provides the selection of available payment methods in the online store. Only configured and activated payment plugins are displayed. This widget is limited to 1 per page. Click on the pencil button on the widget to open the inline editor and edit the title directly in the widget. Click Edit to carry out the widget settings.

Table 27. Settings payment method selection
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Notes and requests

This widget provides a text box with which customers can add notes and requests to their order. Click on the pencil button on the widget to open the inline editor and edit the title directly in the widget. Click Edit to carry out the widget settings.

Table 28. Settings notes and requests
Setting Explanation

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Terms and conditions checkbox

This widget provides a checkbox with which customers can agree to your general terms and conditions. This widget is limited to 1 per page. Click Edit to carry out the widget settings.

Table 29. Settings terms and conditions checkbox
Setting Explanation

Hide checkbox

Activate to hide the checkbox in the online store. The checkbox is checked by default.

Preselect checkbox

Activate to activate the checkbox by default.

Required field

Activate to make the checkbox mandatory before customers can place an order.

Text

Enter text. This text overwrites the text next to the checkbox.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Shipping information checkbox

This widget provides a checkbox with which your customers can agree to transmit their shipping information to the corresponding shipping service provider. The checkbox will only be displayed in the online store if a shipping profile is selected for which the option Agreement upon data transfer is active. Click Edit to carry out the widget settings.

Table 30. Settings shipping information checkbox
Setting Explanation

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Newsletter checkbox

Provides a checkbox with which customers can subscribe to one of your newsletters. Click Edit to carry out the widget settings.

Table 31. Settings newsletter checkbox
Setting Explanation

ID of the email folder

Enter the ID of the email folder you want to use for the newsletter registration.

Hide checkbox

Activate to hide the checkbox in the online store. The checkbox is checked by default.

Preselect checkbox

Activate to activate the checkbox by default.

Required field

Activate to make the checkbox mandatory before customers can place an order.

Text

Enter text. This text overwrites the text next to the checkbox.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Purchase button

This widget provides the button with which customers can place an order in the online store. Click Edit to carry out the widget settings.

Table 32. Settings purchase button
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Button size

Select small, default, or large as the button size.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Cancel payment button

This widget provides a button with which your customers can abort a verified purchase they placed via a payment plugin (e.g. PayPal). Click Edit to carry out the widget settings.

Table 33. Settings cancel payment button
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the widget.. You define the available colour options in the Design menu.

Button size

Select small, default, or large as the button size.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.9. My account

This widget category lists all widgets that serve to design the customer area of your online store.

Account settings

This widget provides your customers with an overview over their account settings via which they can change their email address and their password. Click on the pencil icon to edit the widget title and the description text with the inline editor. Click Edit to carry out the widget settings.

Table 34. Settings account settings
Setting Explanation

Appearance

Select a colour from the drop-down list. This determines the colour of the Change email address and Change password buttons. You define the available colour options in the Design menu.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Bank details

This widget provides your customers with an overview over their banking information. Click on the pencil icon to edit the widget title and the description text with the inline editor. Click Edit to carry out the widget settings.

Table 35. Settings bank details
Setting Explanation

Appearance

Select a colour from the drop-down list. This determines the colour of the Add bank details button. You define the available colour options in the Design menu.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Order history

This widget provides a list of your customers’ past orders. The order history contains the order ID, totals, order date, shipping date, and the order status. Click on the pencil icon to edit the widget title with the inline editor. Click Edit to carry out the widget settings.

Table 36. Settings order history
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the title pagination. You define the available colour options in the Design menu.

Order per page

Select the number of orders that are listed per page.

Allow changing payment method

Activate to allow your customers to change the payment method at a later time.

Allow returns

Activate to allow customers to return their orders.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Return history

This widget provides a list of your customers’ past returns. The returns history contains the return ID, order ID, return date, the selected payment method, and relevant return documents of the order. Click on the pencil icon to edit the widget title with the inline editor. Click Edit to carry out the widget settings.

Table 37. Settings return history
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the title pagination. You define the available colour options in the Design menu.

Returns per page

Select the number of returns that are listed per page.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

Logout button

This widget provides the button with which customers can log out of the online store. Click Edit to carry out the widget settings.

Table 38. Settings logout button
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the button. You define the available colour options in the Design menu.

Button size

Select small, default, or large as the button size.

Edit paddings

Activate to display additional formatting options. You can edit all paddings and margins separately.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.10. Footer

This widget category lists all widgets that can only be used in the footer of your online store.

This widget provides a list with links to your legal information, which you can display in the footer of your online store. Your legal information is edited and saved in the System » System settings » Client » Select client » Online store » Legal information menu. Click Edit to carry out the widget settings.

2.1.11. Miscellaneous

This widget category lists all widgets that cannot be sorted into any other category. It subsumes the widgets GoogleMaps and newsletter registration.

GoogleMaps

Note: This widget is not part of the default Ceres plugin and hast to be loaded from the plentyMarketplace. After downloading the widget, you need to install it. The widget is available in the widget overview after its installation.

This widget integrates GoogleMaps into your online store. You can, for instance, use it to illustrate the location of your local store. Click Edit to carry out the widget settings.

Table 40. Settings GoogleMaps
Setting Explanation

Google API key

Enter the API key that is a prerequisite for using GoogleMaps. You receive the API key from Google Cloud. The GoogleMaps API may be subject to additional costs.

Address

Enter the address that you want to highlight on the map.

Zoom

Enter the zoom level for the map view. The default value is 16; higher values zoom in, lower values zoom out.

Newsletter

This widget provides the newsletter registration for your customers. Click on the pencil icon to edit the widget title with the inline editor. Click Edit to carry out the widget settings.

Table 41. Settings newsletter
Setting Explanation

Appearance

Select a colour from the drop-down list. This value determines the colour of the subscribe button. You define the available colour options in the Design menu.

Display input fields for first and last name

Activate to display the input fields for first and last name in addition to the email address.

Display checkbox for accepting the privacy policy

Activate to display a checkbox in the newsletter registration with which your customer can accept your privacy policy.

ID of the email folder

Enter the ID of the email folder in which the customers’ email addresses are supposed to be stored. You create email folders in the CRM » Newsletter » plentymarkets » Email folder menu.

Edit margins

Activate to display additional formatting options. You can edit all paddings and margins separately.

2.1.12. Inline editing for widget texts

Several widgets offer the possibility to edit widget texts inline. This means that the text can be edited directly in the preview window of the widget instead of the widget settings. Open the inline editor by clicking the pencil button on the widget (see <<bild-inline-editing, image).

inline editing
Figure 3. Opening the inline editor

Highlight the text you want to edit in the inline editor to open the formatting options. The following formatting options are available:

inline editing options
Figure 4. Formatting options in the inline editor
Table 42. Formatting options in the inline editor
Option Explanation

Bold

The selected text is formatted in bold font.

Italic

The selected text is formatted in italic font.

Underline

Underlines the selected text.

Strikethrough

The selected text is formatted as crossed out text.

Headline

The drop-down list provides 6 formatting options for titles, ranging from H1-H6, with which the selected text can formatted. Please note that the use of H1 titles can impact the SEO ranking.

Link

Opens an overlay in which you can define a link target for the selected text. Additionally, you can specify that the link target is opened in new tab upon clicking the selected text.

Orientation

Select whether the highlighted text left- or right-justified, centred or fully justified.

List

The highlighted text is formatted as a list of bullet points, in which the entries are marked with dots.

Numbered list

The highlighted text is formatted as a numbered list.

Font colour

Select the font colour of the highlighted text. You can select black or one of the 6 colours you have defined in the design menu.

Background colour of the text

Select the background colour of the highlighted text. You can select white or one of the 6 colours you have defined in the design menu.

Translation key

Opens an overlay in which you can enter a translation key. Translation keys are placeholders that are filled with content you specify in the CMS » Multilingualism menu. The format for the keys you enter here is Ceres::Template.keyName, whereas “keyName” should be replaced by the corresponding translation key. Please note that the translation keys are case sensitive and are written in camelCase; accordingly, the translation key for your GTC is Ceres::Template.termsAndConditions.

When you are done editing your texts in the inline editor, apply the changes by clicking the green check mark in the upper right corner of the editor window. Do not forget to save your changes.

2.1.13. Paddings and margins

You can specify the paddings and margins of nearly all widgets. The widget settings include the 2 checkboxes Edit paddings and Edit margins. If you activate the checkboxes, new formatting options for paddings and margins will be displayed in the widget settings.

Table 43. Edit paddings and margins
Setting Explanation

Auto

Default value.

XS

The spacing equates to 0,25 rem.

S

The spacing equates to 0,5 rem.

M

The spacing equates to 1 rem.

L

The spacing equates to 1,5 rem.

XL

The spacing equates to 3 rem.

Custom

Enter your own value for the spacing. Select either px or rem as the spacing unit.

3. Editing design settings with the ShopBuilder

The Design button opens the design settings of the ShopBuilder. In this menu, you carry out settings pertaining to the colour scheme and the fonts used in your online store.

3.1. Editing colour settings with the ShopBuilder

You can globally manage the colour scheme of all your pages in the ShopBuilder. The names of the 6 colour fields in the colour section are taken from the framework Bootstrap. You can define own colours for the 6 fields and access them via the drop-down list Appearance in most widgets.

Editing colour settings in the ShopBuilder:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Click on any content you created.
    → The editor view opens.

  3. Click on the Design button in the tool bar.
    → The Design menu opens.

  4. Carry out the settings in the Colours section. Pay attention to the information given in Table 44.

  5. Save the settings.

Table 44. Global colour settings in the ShopBuilder
Setting Explanation

Primary colour

Select the primary colour of your online store. It determines the colouring of the buttons in your online store. Select a colour via the colour picker or enter a hex value.

Secondary colour

This attribute changes the secondary colour of the online store. You can use this colour field in most widgets. Select a colour via the colour picker or enter a hex value.

Success colour

This attribute changes the colour of the success notifications in the online store. You can use this colour field in most widgets. Select a colour via the colour picker or enter a hex value.

Information colour

This attribute changes the colour of information notifications in the online store. You can use this colour field in most widgets. Select a colour via the colour picker or enter a hex value.

Warning colour

This attribute changes the colour of warning notifications in the online store. You can use this colour field in most widgets. Select a colour via the colour picker or enter a hex value.

Danger colour

This attribute changes the colour of error notifications in the online store. You can use this colour field in most widgets. Select a colour via the colour picker or enter a hex value.

3.2. Editing fonts in the ShopBuilder

The ShopBuilder also offers the possibility of selecting individual fonts for the online store. You can either enter the URL of a font or upload a font file. These fonts are used globally in your online store.

Adding a font:

  1. Go to CMS » ShopBuilder.
    → The content manager view of the ShopBuilder opens.

  2. Click on any content you created.
    → The editor view opens.

  3. Click on the Design button in the tool bar.
    → The Design menu opens.

  4. Carry out the settings in the Fonts section. Pay attention to the information given in Table 45.

  5. Save the settings.

Table 45. Editing fonts in the ShopBuilder
Option Explanation

Enter font URL

Enter a URL in the respective fields (regular, bold, italic or bold-italic).

Upload font

You require a font file on your computer. Select the font file you want to use in the respective fields (regular, bold, italic or bold-italic).

4. ShopBuilder workflow for creating new pages

Follow these steps to create new pages and display them in the online store.

  • Select the plugin set, the language and the client in the content manager view.

  • Select the category for which you want to create a new page.

  • Create a new content by clicking New.

  • Click the newly created content to open the editor view.

  • Add widgets to the page and carry out the widget settings.

  • Save your changes.

  • Activate the content in the content manager view to make the page available in your online store.

To top