Skip to main content

Setting up the ShopBuilder

The plentymarkets ShopBuilder is an online store construction kit, with which you can assemble your Ceres online store quickly and easily via Drag&Drop. No programming skills are required.

Version requirements of the ShopBuilder
  • In order to use the ShopBuilder you must have a valid SSL certificate

  • The respective store must not be blocked.

  • The ShopBuilder is only compatible with Ceres and IO versions 2.8.1 and higher. If you are using an older version, please go to the plentyMarketplace to install the current version.

Functionality of the ShopBuilder

Currently, it is only possible to create and edit the homepage of your Ceres online store with the ShopBuilder. The functionality of the ShopBuilder module is constantly expanding and it will be possible in the future to arrange the entire Ceres store through this tool.

Displaying the homepage created with the ShopBuilder

Please note that the homepage created with the ShopBuilder has to be activated first. Go to CMS » ShopBuilder » Overview » Settings » Homepage. Activate the option Show ShopBuilder homepage and deactivate the option Show default homepage.

1. Editing the Ceres homepage with the ShopBuilder

In the preview area, you can add elements to the homepage to adjust it to your individual needs.

Adding an element to the preview area:

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Click on homepage.

  3. Click New or click an existing homepage.
    → The preview area of the homepage opens.

  4. Move elements from the left side into the preview area via drag & drop. Pay attention to the information given in Table 1. → New elements are automatically added below the existing ones or can be dragged into a structure element.

  5. Save the settings.
    → The homepage of your online store is displayed with the selected elements.

The ShopBuilder contains structure elements that arrange the layout of the page and the so-called widgets, thus, several page elements that can be used to fill structure elements. In the following table these elements are further explained:

Table 1. Elements of the ShopBuilder
Element Explanation

Structure elements

2 boxes

Provides a structure element with 2 boxes that can be filled with the widgets listed below. Click Edit to change the layout. Select a size ratio from the Layout drop-down list.

3 boxes

Provides a structure element with 3 boxes that can be filled with the widgets listed below. Click Edit to change the layout. Select a size ratio from the Layout drop-down list. Stacked options display 2 boxes on top of each other.

4 boxes

Provides a structure element with 4 boxes that can be filled with the widgets listed below. The size ratio cannot be adjusted. ¤2+

1.1. Editing elements of the Ceres homepage with the ShopBuilder

In the preview area, you can edit elements of the homepage to adjust it to your individual needs.

Editing elements in the preview area:

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Move the cursor over the element you want to edit.
    → The context menu opens.

  3. Click Edit.
    → The Settings bar is displayed.

  4. Carry out the settings. Pay attention to the information given in Table 1.

  5. Save the settings.
    → The homepage of the online store is modified according to the settings.

You can also remove elements.

Removing elements from the preview area:

  1. Go to CMS » ShopBuilder.
    → The preview area opens.

  2. Move the cursor over the element in the preview area you want to remove.
    → The context menu opens.

  3. Click Delete to remove the element.
    → The element is removed.
    → The surrounding elements are regrouped and replace the deleted element.

  4. Save the settings.
    → The homepage of the online store is modified according to the settings.

2. Editing design settings in the ShopBuilder

You can open the design menu by clicking the Design button in the ShopBuilder editor. Here, you can edit colour settings and select or upload fonts for your online store.

2.1. Editing colour settings in the ShopBuilder

You can globally manage the colour scheme of all your pages in the Shop Builder.

Editing colour settings in the ShopBuilder:

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Click on homepage.
    → The preview area of the homepage opens.

  3. Click on Design in the toolbar.
    → The Design menu opens.

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

  5. Save the settings.

Table 2. Global colour settings in the ShopBuilder
Element Explanation

Primary colour

Select the primary colour of your online store. It determines the colouring of the buttons in your online store. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

Secondary colour

This attribute changes the secondary colour of the online store. You can use them for the colour sheme of your widgets. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

Success colour

This attribute changes the colour of the success notifications in the online store. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

Information colour

This attribute changes the colour of information notifications in the online store. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

Warning colour

This attribute changes the colour of warning notifications in the online store. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

Danger colour

This attribute changes the colour of error notifications in the online store. Choose a colour from the colour picker or enter a hexadecimal value.
Note: This value can be used by theme plugins for different colour schemes.

2.2. Editing fonts in the ShopBuilder

The Shop Builder 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.

Editing fonts:

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Click on homepage.
    → The preview area of the homepage opens.

  3. Click on Design.
    → The window Design opens.

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

  5. Save the settings.

Table 3. Editing fonts in the ShopBuilder
Setting Explanation

Enter font URL

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

Upload font

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

3. Carry out additional settings

The ShopBuilder also serves to carry out all settings available in the Ceres configuration. To do so, proceed as follows.

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Click on Settings.
    → The menu Plugin configuration opens.

  3. Carry out the settings. Pay attention to the information given in Setting up Ceres.

  4. Save the settings.

Selecting a plugin set in the ShopBuilder
You can select a plugin set from the drop-down list. The page preview displays the settings carried out for the plugin set (e.g. which item is visible).

4. Creating a page in the ShopBuilder

The overview of the ShopBuilder offers the possibility of creating and naming new pages for the homepage.

Creating a page:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Click on New.
    → The window Create new page opens.

  3. Click Add page.
    → The window Page name opens.

  4. Enter a name.

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

4.1. Renaming content in the ShopBuilder

It is possible to rename content at any time.

Renaming content:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Move the mouse cursor over the content that you want to rename.

  3. Click on the Further options button.

  4. Click on Rename.
    → The Rename window opens.

  5. Enter any desired name for the content.

  6. Save the settings.

4.2. Deleting a page in the ShopBuilder

Pages created in the ShopBuilder can also be removed.

Deleting a page:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

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

  3. Click on the Further options button.

  4. Click on Delete.
    → The Delete window opens.

  5. Click on Delete to delete the page.

  6. Click Delete to delete a page.
    → The page is deleted.

Every page that is created in the ShopBuilder is automatically linked to the homepage. However, the link can be deleted.

Deleting a link:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

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

  3. Click on Deactivate.
    → The link to the homepage is deleted.

A deleted link of a ShopBuilder page to the homepage can be recreated.

Creating a link:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Move the mouse cursor over the page that you want to link to the homepage.

  3. Click on Activate.
    → The selected page is linked to the homepage.

The blue marking indicates that a link exists.

4.5. Duplicating content

In the overview of the ShopBuilder you can duplicate content.

Duplicating content:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Move the mouse cursor over the page whose content you want to duplicate.

  3. Click on the Further options button.

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

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

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

Table 4. Duplicating content
Setting Explanation

New name

Here, the initial name with the addition (Copy) is entered by default. However, you can change the name for the duplicated content.

Select plugin set

Select a plugin set for the duplicated content.

Select language

Select a language for the duplicated content.

Category

Select the desired category for the duplicated content.

5. Selecting a language

It is possible to create homepages with different languages independently of one another.

Selecting a language:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Select a language from the drop-down list.

  3. Click Add page.

  4. Enter a name for the page.

  5. Save the settings.
    → The language settings for the page will be saved automatically.

6. Displaying client preview

On the editing page, it is possible to view the created page for the different clients (preview).

Displaying client preview:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Select a page.
    → The selected page opens.

  3. Select the desired client from the drop-down list Client for preview.
    → The created page is displayed for the selected client.

7. Creating new categories in the ShopBuilder

The categories in the ShopBuilder are displayed on the left in the overview. Here you can create new categories as main or sub categories.

Creating new categories in the ShopBuilder:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

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

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

  4. If you want to create a subpage, click in the editing window on the category in which you want to create the subcategory.

  5. Click Create.
    → The new category has been added to the category tree.

8. Deleting a category in the ShopBuilder

Categories can be deleted.

Deleting a category:

  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. In the category tree, click on the editing button of the category that you want to delete.
    → The Edit category window opens.

  3. On the top, click on the Delete button.
    → The window Delete category opens.

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

9. Creating a header or a footer in the ShopBuilder

In the ShopBuilder you can create a header and a footer. 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 overview of the ShopBuilder opens.

  2. In the section Header elements or Footer elements, click New.
    → The window Create new page will open.

  3. Select Create header or Create footer.

  4. Enter a name.

  5. Select either the standard header or the standard footer or do not make any selection.

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

  7. Click Activate to link the header or the footer.

10. Editing the header

The settings carried out in the header are globally effective. For the header, the widgets Top bar, Category navigation and Breadcrumbs are available for selection.

Globally editing the header:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Click on the header.
    → The page created for the header will open.

  3. Via Drag&Drop, move the desired widget into the preview area.

  4. Click Edit.
    → The respective editing window will open.

  5. Carry out the settings. Pay attention to the information given in Table 1. → The settings are saved automatically.

The settings carried out in the footer are globally effective. For the footer, the widget Legal information is additionally available for selection.

Globally editing the footer:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. Click on the footer.
    → The page created for the footer will open.

  3. Via Drag&Drop, move the desired widget into the preview area.

  4. Click Edit.
    → The respective editing window will open.

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

  6. The settings are saved automatically.

12. Using the standard homepage template

For the homepage you can use the standard homepage template. Some widgets are already preset and can be edited. Moreover, further widgets can be added. Settings that have already been carried out in the Ceres configuration or the multilingualism are considered.

Using the standard header template:

  1. Go to CMS » ShopBuilder. + ¤The overview of the ShopBuilder opens.

  2. In the section Header elements, click New.
    The window Create new page will open.

  3. Enter a name and select the Standard header in the template field.

  4. Save the settings.
    → The section is created in the section Header elements.

  5. Click on the page.
    → The preview with the default settings for the standard header opens.

  6. In order to edit the default settings, click Edit in the respective widget.

  7. Carry out the settings. Pay attention to the information given in Table 1.

13. Using the standard homepage template

For the homepage you can use the standard homepage template. Some widgets are already preset and can be edited. Moreover, further widgets can be added. Settings that have already been carried out in the Ceres configuration or in the multilingualism are taken into account.

Using the standard homepage template:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. In the section Content, click New.
    → The window Create new page will open.

  3. Enter a name and select the Standard homepage in the template field.

  4. Save the settings.
    → The page is created in the section Content.

  5. Click on the page.
    → The preview with the default settings for the standard homepage opens.

  6. In order to edit the default settings, click Edit in the respective widget.

  7. Carry out the settings. Pay attention to the information given in Table 1.

For the footer you can use the standard footer template. Some widgets are already preset and can be edited. Moreover, further widgets can be added. ¤Settings that have already been carried out in the Ceres configuration or in the multilingualism are taken into account.

Using the standard footer template:

  1. Go to CMS » ShopBuilder.
    → The overview of the ShopBuilder opens.

  2. In the section Footer elements, click New.
    The window Create new page will open.

  3. Enter a name and select the Standard footer in the template field.

  4. Save the settings.
    → The page is created in the section Footer elements

  5. Click on the page.
    → The preview with the default settings for the standard footer opens.

  6. In order to edit the default settings, click Edit in the respective widget.

  7. Carry out the settings. Pay attention to the information given in Table 1.

15. Ideal image sizes for the ShopBuilder

There are 4 different aspect ratios for images in the Image box and Image carousel widgets. These ratios are dependent on whether the widget is integrated as a standalone or in a grid with 2, 3 or 4 columns as well as which layout setting is selected for the grid.

For image widgets that are integrated without a grid or in a 2 column grid with the layout setting 50%:50%, the ideal image aspect ratio of width to height is 3:1. If you change the layout settings, the aspect ratio changes to 2:1 (for 66.6% elements) and 1:1 (for 33.3% elements).

For image widgets in a 3 column grid with the layout setting 30%:30%:30%, the ideal image aspect ratio of width to height is 1.5:1. Depending on the layout settings, the aspect ratio changes according to the table below.

For image widgets in a 4 column grid, the ideal image aspect ratio of width to height is 1:1. The layout for this type of grid cannot be changed.

Table 5. Ideal image sizes for ShopBuilder widgets
Number of grid columns Layout setting (%) Aspect ratio Example size

No grid

-

3:1

1200x400px

2

50%

3:1

1200x400px

2

66.6%

2:1

1200x600px

2

33.3%

1:1

1200x1200px

3

33.3%

1.5:1

1200x800px

3

50%

2:1

1200x600px

3

25%

1:1

1200x1200px

3

66.6% (stacked)

1.5:1

1200x800px

3

33.3%

1.5:1

1200x800px

4

-

1:1

1200x1200px

16. Scripts in the text widget

In order to use JavaScript scripts in the online store, you can implement <script2> tags in the text widget of the ShopBuilder. This tag functions like a common <script> tag. ¤For the documentation of the framework used for the ShopBuilder, see here.

<script2 src="https://momentjs.com/downloads/moment.js"></script2>

Explanation: Here a <script2> tag is used only with the src attribute to load an external script.

<script2>
    var today = moment().format('dddd');
    alert("today is " + today);
</script2>

Explanation: JavaScript code is written within the script2 tag. moment.js is accessed here, which was loaded in the previous script.

Tip: External scripts can be uploaded in the webspace and integrated via the ShopBuilder. You can access the URL of the script in the plentymarkets webspace.

To top