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 locked.

  • 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, the checkout and the content categories of your Ceres online store with the ShopBuilder. The functionality of the ShopBuilder module is constantly expanding and in the future it will be possible to set up the entire Ceres store with 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 on 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 can be dragged to the desired position.

  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 so-called widgets, which are various page elements that can be used to fill structure elements. The widgets are sorted in the categories Text, Image, Item, Header, Footer, and Miscellaneous. In the following table these elements are further explained:

Table 1. Elements of the ShopBuilder
Element Description

Structure elements

2 boxes

Provides a structure element with 2 boxes that can be filled with the widgets listed below and with other structure elements. 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 and with other structure elements. Click Edit to change the layout of the element. Select a size ratio for the columns 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 and with other structure elements. The size ratio of the columns cannot be adjusted.

Separator line

Provides a separating line that serves as placeholder. Click Edit to adjust the paddings and margins of the separator line.

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.

Text

Title bar

Provides a text box. Click Edit to enter text and determine the colour of the title bar via the appearance drop-down list. You can only enter plain text

Text

Provides a text box. Click Edit to open the text editor. You can select the colour for the text widget from the Appearance drop-down list. Enter the text you want to display in the widget as plain text or switch to HTML by clicking the </> symbol in the text editor. Note that at this point implementing CSS is not yet possible.

List

Provides a list that serves as placeholder. Click Edit to add list entries or icons.

Link list

Provides a link list that serves as placeholder. Click Edit to add a list title, list entries or icons.

FAQ

Provides text boxes for displaying frequently asked questions in the online store. The corresponding answer is displayed after clicking the question. Click Edit to open the settings. You can select the colour for the questions from the appearance drop-down list. Add additional questions and answers by clicking the plus button.

Image

Image carousel

Provides the Ceres image carousel. Click Edit to add or remove images. Images can be selected by using the category picker, by entering a variation ID or via the file selector. If the image is determined by the category picker, the first image that is stored in the documents tab is used. Determine the colour of the image carousel via the Appearance drop-down list. The optimal image sizes are described in this chapter.

Image box

Provides a container for the images. Click Edit to add or remove images. Images can be selected by using the category picker, by entering a variation ID or via the file selector. If the image is determined by the category picker, the first image that is stored in the documents tab is used. Determine the colour of the image box via the Appearance drop-down list. Change the size of text and the image size via the Box style and Image size drop-down lists. The optimal image sizes are described in this chapter.

Item

Item list

Provides the Ceres item list. Click Edit to add or remove images. You can add item lists of the types Category items, Last seen items and Items with tags. Determine the sorting value via the Item sorting drop-down list and enter the Maximum number of displayed items for the list.

Live shopping

Provides a container for live shopping items. Click Edit to carry out the settings for the widget. Select one of 10 live shopping profiles that you create in the System » System settings » Client » Global » Live shopping menu from the Live shopping selection

Under Sorting, select the sorting option, by which the first displayed variation is determined.

Activate the option Display timer to show a running countdown for the live shopping offer. If this option is active, you can also Display a time-dependent progress bar that is displayed below the countdown.

Activate the option Display stock to display the available stock. If this option is active, you can also Display a time-dependent progress bar that is displayed below the stock.

Activate the option Display strikethrough price in order to display the RRP in the widget next to the special offer.

Under Image selection you can upload an item image for the live shopping offer. If you don’t upload an image, the item image of the variation is displayed.

Important: To use live shopping, you must have created at least one live shopping profile. Furthermore, you must have created a sales price of the price type Special offer.

Miscellaneous

GoogleMaps

Provides a map to display the location of your store. Click Edit to enter the Google API key that you received fromGoogle Cloud. Note: The GoogleMaps API may be subject to additional costs.
Enter the address that you want to highlight on the map and the zoom level for the map view. The default value is 16; higher values zoom in, lower values zoom out.

Newsletter

Provides a newsletter registration for customers.

Appearance = Select the colour for the Subscribe button.
Title = Enter the title for the newsletter registration, e.g. “Our Newsletter”
Description = Enter the description for the newsletter registration. The description is displayed below the title.
Display input fields for first and last name = Activate to display the input fields for both first and last name in the newsletter registration.
Display checkbox for confirming privacy policy = Activate to display a checkbox, with which customers can consent to the privacy policy.
Email folder ID = 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.

Tab: Header

Category navigation (Header)

Provides the category navigation. Click Edit to carry out the settings and determine the style of the category navigation, the category levels as well as the number of categories. You can also add a company logo.

Fix when scrolling the page = Activate to always display the category 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 of the 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.

Breadcrumbs (Header)

Provides a breadcrumb navigation. Click Edit to carry out the settings.

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 MyAccount area = Activate to display the breadcrumb navigation in the MyAccount area.
Display in checkout = Activate to display the breadcrumb navigation in the checkout.
Display on content category pages = Activate to display the breadcrumb navigation on category pages of the type Content.

Top Bar (Header)

Provides a top bar. Click Edit to carry out the settings and determine the display of the elements, the search, or the shopping cart information.

Fix when scrolling the page = Activate to always display the top bar when users scroll through the page.
Display of the search = Select whether the search is always visible, displayed as a fold in search, or is not shown.
Display item images in search suggestions = Activate to display the images stored for your items in the search suggestions.
Item search: forward to item view = Activate to forward customers directly to the single item view if the click a suggested search result.
Display elements in the top bar = Activate the relevant checkboxes to display the customer login, the customer registration, language and currency selection, selection of the country of delivery, wish list, and shopping cart preview in the top bar.
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.

Tab: Footer

Legal information (Footer)

Provides the display of legal information. Click Edit to determine which elements should be visible in the footer. You can also upload a cancellation form in PDF format.

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 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 the Ceres checkout with the ShopBuilder

With Ceres 3.1.0 you can also edit the Ceres checkout with the ShopBuilder. In addition to the dedicated checkout widgets, all other widgets that can be placed on the homepage are available for designing the checkout. You set up the checkout in the same way as the homepage.

In order for the checkout that you build in the ShopBuilder to work properly, you need to create a category and link it in the category view of the ShopBuilder:

Creating a checkout category:

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

  2. Click New category in the category tree on the left.
    → The Create new category window opens.

  3. Enter a name for the category, e.g. Order process.

  4. Select Main category.

  5. Click Create.
    → The Edit category window will open.

  6. Link the category to a client and carry out the settings according to Table 6

  7. Save the settings.

After you have created the category, you need to link it to the Ceres checkout:

Linking the checkout category:

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

  2. Click on Open settings on the left in the toolbar.
    → The UI for category links opens.

  3. Click on Category for checkout.

  4. Select the newly created checkout category via the category picker.

  5. Click on Select.
    → The category picker collapses.

  6. Save the settings.

The newly created category is now linked with the checkout of the Ceres plugin. Create a new checkout page in the category selection of the ShopBuilders:

Creating a checkout page:
  1. Go to CMS » ShopBuilder.
    → The ShopBuilder opens.

  2. Select your checkout category from the category tree on the left.

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

  4. Select the content type Checkout.

  5. Enter a name for the checkout page.

  6. If necessary, select a preset for the checkout.

  7. Save the settings.
    → The new checkout page has been created.

  8. On the tile that represents the new page, click on Activate to use this page as your checkout.

  9. Click on the tile of the new page to open the page in the ShopBuilder editor. Pay attention to the details provided in Table 2 and Table 1.

  10. Save the settings.

Table 2. Checkout widgets
Widgets Description

Customer data

Address selection

Provides the address selection so that customers can enter a delivery and/or invoice address in the checkout. Click Edit to carry out the settings.

Address type = Add an 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.
Show invoice and delivery address fields = Select the address fields that are shown to your customers, so that they can enter their address information.
Required fields for invoice and delivery address = Select the address fields that your customers must fill in 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.

Shopping cart

Shopping cart content

Provides an overview over the items in the shopping cart. Click Edit to select the colour of the widget.

Coupon input

Provides the input field for customers to redeem their coupon codes. Click Edit to select the colour of the widget.

Totals

Provides an overview over the totals. Click Edit to open the settings and 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)
Coupon for special offers
Gift certificate
VAT
Totals (net)
Totals (gross)
Outstanding amount

Checkout

Shipping profile selection

Provides a selection of the configured and active shipping profiles. Click Edit to carry out the settings. This widget is limited to 1 per page.

Text = Enter text that is displayed between the headline and the selection of shipping profiles.

Payment methods

Provides a selection of payment methods. You need to integrate your payment methods through plugins and activate them for the client, country of delivery and customer class. Click Edit to carry out the settings. This widget is limited to 1 per page.

Text = Enter text that is displayed between the headline and the selection of payment methods.

Notes and requests

Provides a text box with which customers can add notes and requests to their order. Click Edit to carry out the settings.

Text = Enter the text that is displayed betwen headline and the text box.

Terms and conditions checkbox

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

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.

Shipping information checkbox

Provides a checkbox with which customers can agree that their shipping information is forwarded to the shipping service provider. Whether the checkbox is displayed in the online store depends on the selected shipping profile. The option Agreement upon data transfer has to be activated for the shipping profile.

Newsletter checkbox

Provides a checkbox with which customers can subscribe to your newsletter. Click Edit to enter the ID of your email folder, to overwrite the text that is displayed next to the checkbox and to carry out further settings:

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.

Purchase button

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

Button size = Select whether the button size is small, standard or large.

3. 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.

3.1. Editing colour settings in the ShopBuilder

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

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 3.

  5. Save the settings.

Table 3. Global colour settings in the ShopBuilder
Element Description

Primary colour

Select the primary colour of your online store. It determines the colouring of the buttons and widgets 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.

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.

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 4.

  5. Save the settings.

Table 4. Editing fonts in the ShopBuilder
Option Description

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).

4. 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).

5. 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. Enter a name.

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

5.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 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.

5.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 page you want to delete.

  3. Click on the Further options button.

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

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

5.3. Deleting links of ShopBuilder pages to the homepage

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 Deactivate.
    → The link to the homepage is deleted.

5.4. Linking ShopBuilder pages to the homepage.

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 Activate.
    → The selected page is linked to the homepage.

The blue mark indicates that a link exists.

5.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 5.

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

Table 5. Duplicating content
Setting Description

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 a plugin set.

Select a plugin set for the duplicated content.

Select a language

Select a language for the duplicated content.

Category

Select the desired category for the duplicated content.

6. 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.

7. 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 client from the drop-down list Select client.

  3. Select a page.
    → The created page is displayed for the selected client.

8. Creating and editing 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 and in the window Edit category it is possible to carry out further settings.

Creating and editing 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 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 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 and the window Edit category opens.

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

  7. Save the settings.

Table 6. Editing a category
Setting Description

General settings

Select client (store)

Select a client from the drop-down list.

Show sitemap

Select whether the category should be included in the sitemap.

Show in link list

Select whether the category should be displayed in the linklist.

Client (store) specific settings

Client (store)

Select a client from the drop-down list.

Name

Category name

URL

The URL of the category.

Canonical

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

Position

Enter a number to specify 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.

9. Carrying out settings for a client:

In the editing window of a category you can not only carry out basic settings, but also select which categories should be active or inactive for a client. The settings are accordingly displayed in the category tree.

Carrying out settings for a client:

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

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

  3. In the category tree, click on Edit category.
    → The Edit category window will open.

  4. In the section Basic settings, select the client for which the category should be active..

  5. Save the settings.
    → The category is activated for the selected client and is marked yellow in the category tree. If a category for the selected client is inactive, it is displayed grey in the category tree. If no name or no language is given for a category, the category is displayed in intalics.

10. Deleting categories 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 will open.

  3. On the top, click on the Delete button.
    → The Delete window is displayed.

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

11. 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 opens.

  3. Select Create header or Create footer.

  4. Enter a name.

  5. Select either the standard header, 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.

12. 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. Move the desired widget into the preview area via drag&drop.

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

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

13. Editing the footer

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. Move the desired widget into the preview area via drag&drop.

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

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

14. Using the standard homepage preset

For the homepage you can use the standard homepage preset. Some widgets are already preconfigured and can be edited. Moreover, further widgets can be added. Settings that have already been carried out in the Ceres configuration and 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 opens.

  3. Enter a name and select the Standard header in the preset 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.

15. Using the standard homepage preset

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

Using the standard homepage preset:

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

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

  3. Enter a name and select the Standard homepage in the preset 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.

16. Using the standard footer preset

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

Using the standard footer preset:

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

  2. In the section Footer elements, click New.
    → The window Create new page opens.

  3. Enter a name and select the Standard footer in the preset 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.

17. 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 7. 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% (stacked)

1.5:1

1200x800px

4

-

1:1

1200x1200px

18. 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.

Unresolved directive in <stdin> - include::assets/ShopBuilder-scripts-1.txt[]

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

Unresolved directive in <stdin> - include::assets/ShopBuilder-scripts-2.txt[]

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