Skip to main content

Best Practices: Ceres

Here, you find best practices on subjects such as Ceres and the online store.

1. Testing Ceres updates for theme compatibility

In this best practice you will learn which steps are necessary in order to test newly published version upgrades of the Ceres template plugin without impacting the productive live operation of your plentyShop. Due to implementations of new features, bugfixes and changes to the user interface, dependencies between external plugins (for instance layout themes ) and Ceres may lead to issues when updating to a new Ceres version. Therefore it is advisable to create a copy of your current plugin set configuration, with which you can test the compatibility of the newly released Ceres version and external plugins.

1.1. Copying a plugin set

First, you should create a new Plugin set, onto which you can transfer the current settings of your Ceres shop. To do so, proceed as follows:

Copying a plugin set:

  1. Go to Plugins » Plugin overview.

  2. Click on Create new set.
    → The New plugin set window opens.

  3. Enter a name for the plugin set, which should ideally communicate that this is a copy of your Ceres shop.

  4. Select the plugin set for which you want to copy the current configuration from the Copy plugin set drop-down list.

  5. Save the settings.
    → The new plugin set will be created.

The plugin set copy now contains the exact same settings as the one used as your Ceres shop. At this point, both the original set and its copy are identical. It is advisable to repeat this process before any major update, so that the plugin set is up to date.

1.2. Updating Ceres for the copied plugin set

In the next step, you need to update the copied plugin set to the current Ceres version.

Updating the plugin set:

  1. Go to Plugins » Plugin overview.

  2. Select the newly created copy of the plugin set.
    → The Plugin set details window opens.

  3. In the line of the Ceres plugin, click on Update in the Action column.
    → The Install plugin window opens. → The most current version of the plugin is preselected.

  4. Click on Install.
    → The plugin will open.

  5. Repeat steps 3 and 4 for the plugin IO.

  6. Click on Save & publish plugins.

The copy of the plugin set is now at a more current stage than the plugin set of your Ceres shop. Click on the plugin set copy in the list of plugin sets on the left side of the interface. You can access your Ceres plentyShop in combination with the plugin set copy in preview mode via the button Plugin set preview. That way, you can assess whether the current changes to the Ceres plugin result in incompatibilities with external plugins, like a theme, that your are using. If the external plugins are functioning correctly under the new Ceres version, you can either activate the plugin set copy for the relevant client or Update the original plugin set, as detailed above.

Some dependencies betwen external plugins and Ceres/IO may not be immediately apparent. For this reason it is advisable to not dismiss the original plugin set prematurely, so that the switch to the previous version is still possible after a number of days without adjusting the Ceres settings again. If you want to be informed about incompatabilities or other issues between external plugins and a new version of Ceres/IO, you are invited to visit the forum .

2. Setting up filters

In Ceres Filters are realized by means of attributes and properties. This Best Practice describes how the filter Colour with the two values Red and Black is displayed in the category view of plentyShop. The corresponding filters are only available in the category view if there are items that are linked to the filter values.

First things first:
  • This is a Best Practice for the plentyShop plugin Ceres. Ceres is available in the plentyMarketplace  and runs on plentymarkets systems. The filters from Ceres are also displayed in individual theme plugins, as long as these themes did not overwrite them.

  • The integration into individual or altered template plugins is possible. This, however, requires individual adjustments which cannot be considered here.

  • Filters can be realized by means of facets through attributes and properties. This Best Practice exemplifies the setup of filters by means of attributes. Filters based on properties have to be setup manually. Create a Property group in which you organise properties of the type None. Properties are linked to facet values.

  • For plentymarkets Zero systems, the Setup » Client » Settings » Services » Faceted search menu is only activated in the central login.

2.1. Creating an attribute

We begin with an attribute.

  1. Go to Setup » Item » Attributes.

  2. Click on New attribute.

  3. Enter the internal name, e.g. Colour.

  4. Save the settings.
    → The attribute is created and the tab Basic settings is displayed.

  5. Click on the Name tab.

  6. Enter the translations for your attribute.

  7. Click on the Values tab.

  8. Click on New value.

  9. Enter the internal name, e.g. Red.

  10. Repeat steps 8 and 9 for the value Black.

  11. Save the settings.

The attribute with the two values Red and Black is created. You can also create additional values, such as Vermilion or Burgundy, and link them to the same Red facet.

2.2. Linking an attribute with an item

You can link attributes with the main variation of an item when creating the item. When creating additional variations, you can link these variations with attribute values, too. You will now create variations in the Variations tab of the item. These variations have to be active in plentyShop, so that the filter will be available later on.

bp ceres filter variations en
Figure 1. Linking a variation to suitable attribute values

2.3. Setting up facets

In plentyShop, our filters are realized by means of facets. Therefore we have to create a new facet and link the attribute values and the desired client to it.

  1. Go to Systems » Client » Settings » Services » Faceted search.

  2. Click on New to create a new facet.

  3. Enter a Name for the facet in the default language of your system, e.g. Colour.

  4. Select the type Attribute/Property.

  5. Enter the facet’s position in plentyShop.

  6. Save the settings.

2.4. Linking attribute values to facets

  1. Go to Systems » Client » Settings » Services » Faceted search.

  2. Open the facet.

  3. Click on the Name tab.

  4. Enter the translation for your facet.

  5. Click on the Values tab.

  6. Click on Add new value.

  7. Enter the name, e.g. Red.

  8. Enter the position.

  9. Save the settings.
    → The facet value is added.

  10. Enter the translations for the facet value in th Name tab.

  11. Click on the Link tab.

  12. Open the attribute Attribute » Colour » Red.

  13. Click on Link.

  14. Repeat steps 6 to 13 for the value Black.

  15. Save the settings.

bp ceres filter facets en
Figure 2. Linked facet values

2.5. Linking clients to facets

  1. Go to Systems » Client » Select client » Services » Facet links.

  2. Select the facet.

  3. Click on Link facet.
    → The facet is linked to the selected client.

  4. Save the settings.

2.6. Deploying plugins

Now you will deploy the plugin set in order to apply the changes. The filters will be available in the search and in the category view.

bp ceres filter frontend en
Figure 3. Selected filter in the category view

3. Setting up order characteristics

In this Best Practice we will create a property through which you can enter a text that can be printed onto a T-shirt. The input will automatically calculate a surcharge for the product.

The most important things first:
  • This is a Best Practice for the plentyShop plugin Ceres. Ceres is available on the plentyMarketplace  and runs on plentymarkets systems.

  • The integration into individual or modified template plugins is possible. This, however, requires individual adjustments which cannot be considered here.

3.1. Creating order characteristics

We begin with an property.

  1. Go to Setup » Item » characteristics.

  2. Click on the New property tab.

  3. Enter the Name (internal). This is the name of the property that is displayed in the back end.

  4. Enter the Name in the Online store area. This is the name that your customers see in the item view. In this example we choose “T-shirt print”.

  5. Choose Text from the Property type list.

  6. Enter the Surcharge that should be added if the property is used. In this example we choose 12,00 euros for a T-shirt print.
    → Check the box Display as surcharge so that the customer sees the surcharge for the property in the item view.

  7. Check all the boxes in the Display area in order to keep the additional charges transparent throughout the entire order process.

  8. Check the box Order property to define the property as such.

  9. Save the settings.
    → The property will be created.

Your property interface should now look like this:

bp ceres bestellmerkmale einstellungen
Figure 4. Settings for the order property

3.2. Linking an order property to an item

Characteristics are directly linked to the item. Proceed as follows:

  1. Go to Item » Edit item.

  2. Select an item with which the property should be linked.

  3. Click on the Characteristics tab.

  4. Go to Activate further characteristics » Characteristics not assigned to a group and check the box of the created property.

  5. Save the settings.
    → The property is linked to the item and is shown under Characteristics.

Surcharges

You can also enter a surcharge in the Characteristics options. If you enter a value here, it overwrites the value of the surcharge that was saved for the property.

bp ceres order properties item
Figure 5. Settings for the item

3.3. Deploying plugins

Now you will deploy the plugins in a plugin set in order to apply the changes. The order property will be available in the Item view and the Shopping cart.

bp ceres order properties item view
Figure 6. Item view in the online store

If the customer inputs something into the text field, the text is saved and the surcharge is added to the item price.

bp ceres bestellmerkmale warenkorb
Figure 7. Item view in the shopping cart

3.4. Setting up order characteristics with checkboxes

In this Best Practice we will create an order property that is displayed with a checkbox in the single item view. If the checkbox is checked, the surcharge for the product will automatically be calculated.

3.4.1. Creating a property group

In the first step we will create a new property group. In our example we want customers to be able to purchase complementary couch accessories through checking the checkbox.

  1. Go to Setup » Item » Characteristics.

  2. Click on the New property group tab.

  3. Enter a Name (internal) for the property group to be displayed in the back end.

  4. In the Language area you can enter a name and a description for the property group in various languages to be displayed in plentyShop.

  5. Select None from the drop-down list Grouping of order characteristics (type: "none")

  6. Save the settings.

bp ceres order properties group
Figure 8. Creating a property group

3.4.2. Creating order characteristics

After we have created a property group for couch accessories, we now want to set up a new property, e.g. a couch cushion, and link it to the property group.

  1. Go to Setup » Item » Characteristics.

  2. Click on the New property tab.

  3. Enter a Name (internal) for the property to be displayed in the back end.

  4. In the Webshop area you can enter a name and a description for the property in various languages to be displayed in plentyShop.

  5. Select the newly created property group from the Property group drop-down list.

  6. Select None from the Property type drop-down list.

  7. Enter the Surcharge that should be added if the property is used. In this example we choose 15.00 euros for a couch cushion.
    → Check the box Display as surcharge so that the customer sees the surcharge for the property in the item view.

  8. Check the boxes in the Show area for the areas in which you want to display the property.

  9. Check the Order property box.

  10. Save the settings.

The order property couch cushion has been successfully created.

bp ceres order properties new property
Figure 9. Creating order characteristics

3.4.3. Linking an order property to an item

Last but not least, we ned to link the desired item with the newly created order property.

  1. Go to Item » Edit item.

  2. Select an item with which the property should be linked.

  3. Click on the Characteristics tab.

  4. Go to Activate further characteristics and check the box of the newly created property group.

  5. Save the settings.
    → The property will be linked with the item.

bp ceres order properties link
Figure 10. Linking an order property to an item
Displaying changes

Please note that it may take about 15 minutes until the changes are displayed in plentyShop. This is the interval in which the ElasticSearch index is refreshed.

4. Setting up cross-selling item lists

This Best Practice guide helps you set up item lists of the type cross-selling in Ceres. If you’re using ShopBuilder, you can use the item list widget and don’t need this Best Practice.

First things first…​
  • This is a Best Practice for the plentyShop plugin Ceres. Ceres is available in the plentyMarketplace  and runs on plentymarkets systems.

  • This guide assumes that you have already set up cross-selling relations for your items. You can learn how to configure cross-selling for your items here.

4.1. Setting up cross-selling item lists

Go to Plugins » Plugin overview » Ceres » Configuration » Item lists. In this menu you can determine which type of item list you want to use in your plentyShop. Select the type of cross-selling relation that your item list should display from the Cross-selling: Cross-selling relation drop-down list (see box 1 in the image). You can choose from the options Similar, Accessory, Replacement parts and Collection. This cross-selling relation will apply to all cross-selling item lists in your plentyShop.

In the next step you determine which item list you want to use. Edit the First item list, Second item list or Third item list and select Cross-selling from the drop-down list. In the example below, the Second item list is configured as a cross-selling list (Box 2 in the image). Enter a German and an English name for your item list in the input fields Name of the second item list (DE) and Name of the second item list (EN), respectively.

Save the settings you have carried out.

bp ceres cross selling config
Figure 11. Setting up cross-selling

4.2. Displaying cross-selling item lists in the plentyShop

After you have determined which item list you want to use for your cross-selling items, you now choose where the item list is to be displayed in your plentyShop.

Open the CMS » Container links menu.

Go to the item list that you have configured as your cross-selling item list, i.e. First item list, Second item list or Third item list. Choose the layout container in which you want to display your cross-selling item list. In the example below, the second item list is displayed in the container of the single item view.

bp ceres cross selling container
Figure 12. Choosing a container for item lists
Displaying changes

Please note that it may take about 15 minutes until the changes are displayed in plentyShop. This is the interval in which the ElasticSearch index is refreshed.

5. Information on the German VAT reduction (01.07.2020)

On 01 July 2020, the German legal value added tax rate is lowered. This can lead to problematic cases for orders that have been placed prior to 01 July (i.e. for which the former rate is displayed in plentyShop) but which are shipped after 01 July (and which are therefore subject to the reduced rate). In order to remedy these problem cases, we advise you to remove any exlicit references to the applicable VAT rate from the plentyShop and to also remove any references to net prices (for B2C sales) or gross prices (for B2B sales) displayed in plentyShop, since these allow for the calculation of the applied rates.

You can find further information on the legal circumstances in the German blog of Trusted Shops .

If you are currently using your own theme for plentyShop, it is possible that you need to adjust additional sections in the shop, wherever you display prices or VAT rates. Unfortunately, we are not able to cover these individual cases in this Best Practice.

You should make the changes detailed below in a copy of your active plugin set. You can then activate the adjusted plugin set copy prior to the date the new rates apply. After you have processed all orders that have been placed prior to 01 July and have been shipped after 01 July, you can switch back to your former plugin set, so that the corresponding prices and VAT rates are once more displayed in plentyShop. You can find further information on working with plugin sets on this page.

5.1. CSS adjustments

In order to remove all referenes to net prices from your plentyShop, you need to modify the CSS. The easiest way to do this is to use the plugin Custom CSS/JS in the Frontend .

Add this plugin to your plentymarkets system as described on this page. Afterwards, you need to install the plugin.

After you’ve installed the plugin, open the plugin settings via the action Settings in the line of the Custom CSS plugin. In the tab Stylesheets, you will find an input field labeled CSS, in which you enter the following code snippet:

.cmp-totals dl dt:not(.font-weight-bold),
.cmp-totals dl dd:not(.font-weight-bold),
.cmp-totals .vatTotals,
.cmp-totals hr {
    display: none;
}

.cmp-totals dl {
    margin-bottom: 0;
}

.cmp-totals .vat-change,
.cmp-totals .totalSum hr {
    display: block !important;
}

.cmp-totals .rebate-hint {
    display: inline-block !important;
}

Save your changes. Activate the plugin in your plugin set.

After saving and publishing your plugin set, net prices will no longer be displayed in your plentyShop.

5.2. Adjustments in the ShopBuilder

You need to make changes to 2 pages in the ShopBuilder: the basket and the checkout. You have to add a code widget to both of these pages.

5.2.1. Adding code widgets

In order to remain legally watertight in the transition period, you need to display a message that informs the customer that all prices are to be understood as including the legal VAT (for B2C business) or as excluding legal VAT (for B2B business). In order to display the information in other languages you might have enabled for your plentyShop, you can use two entries from the multilingualism menu. Here, we will use the entry Ceres::Template.itemInclVAT for B2C customers and Ceres::Template.itemExclVAT for B2B customers. That way, B2C customers will see gross prices with the notification that they are to be understood as including VAT; B2B customers will see net prices with the notification that they are to be understood as excluding VAT. Storing a simple message like "incl. legal VAT" and "excl. legal VAT" suffices; you can customise the texts any way you want.

  1. Open the menu CMS » Multilingualism.

  2. Expand the Item section.

  3. Check whether the text in the entries itemInclVAT and itemExclVAT is what you want to display in the store. Adjust them, if necessary.

  4. Save () the settings.

  5. Save () your plugin set in the Plugins » Plugin set overview menu.

Open the ShopBuilder in the CMS » ShopBuiler menu. You will now have to add a code widget in your contents for the basket and the checkout. Place it below the sums widget. Enter the following code in both of code widgets:

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</div>

Save () the changes of your ShopBuilder content.

5.3. Adjusting Ceres templates

There are 2 places in plentyShop that do not display the VAT information and that cannot be customised with the ShopBuilder: the order history in the My Account area and the basket preview. You can adjust three relatively small sections in the Ceres code to output the information in these areas as well. The adjustments to the code also use the same text from the multilingual entry that you used in the code widgets in the previous step.

The 3 adjustments are detailed below. Additionally, we opened a pull rewuest on GitHub, in which you can see the changes to the code. You can find the pull request here . Scroll down to find the changes to the files.

5.3.1. Adjusting the order history

In order to display the VAT information in the order history of the My Account area, you need to add a code snippet in a template file. Follow the steps below:

  1. Open the Plugins » Plugin set overview menu.

  2. In the line of your plugin set copy, click on the action Edit plugin set.
    → The plugin set is opened.

  3. In the line of the Ceres plugin, click on the action Settings.
    → The Ceres settings are opened.

  4. Click on the tab Files in the navigation tree on the left.
    → The file structure of the plugin is opened.

  5. Click on the folder resources.

  6. Click on the folder views.

  7. Click on the folder Checkout.

  8. Click on the folder Macros.

  9. Click on the file OrderTotals.twig.
    → The file is opened in the editor.

  10. After the {% endif %} element in line 186, add the code below in a new line.

  11. Save () your changes.

<dt class="w-100 vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</dt>
<dt class="w-100 vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</dt>

Through these changes, the text you stored in the multilingualism entries itemInclVAT and itemExclVAT are also displayed in the order history.

5.3.2. Adjusting the default header

For ShopBuilder contents for which you haven’t created your own header, you need to make changes to the default header so that the VAT information is also output in the basket preview. Follow the steps below:

  1. Open the Plugins » Plugin set overview menu.

  2. In the line of your plugin set copy, click on the action Edit plugin set.
    → The plugin set is opened.

  3. In the line of the Ceres plugin, click on the action Settings.
    → The Ceres settings are opened.

  4. Click on the tab Files in the navigation tree on the left.
    → The file structure of the plugin is opened.

  5. Click on the folder resources.

  6. Click on the folder views.

  7. Click on the folder PageDesign.

  8. Click on the folder Partials.

  9. Click on the folder Header.

  10. Click on the file DefaultHeader.twig.
    → The file is opened in the editor.

  11. After line 118, add the code below in a new line.

  12. Save () your changes.

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices">Ceres::Template.itemInclVAT</div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices">Ceres::Template.itemExclVAT</div>

Through these changes, the text you stored in the multilingualism entries itemInclVAT and itemExclVAT are also displayed in the basket preview of the default header.

5.3.3. Adjust customised ShopBuilder headers

For ShopBuilder contents for which you have created your own header, you need to make changes to the top bar widget so that the VAT information is also output in the basket preview. Follow the steps below:

  1. Open the Plugins » Plugin set overview menu.

  2. In the line of your plugin set copy, click on the action Edit plugin set.
    → The plugin set is opened.

  3. In the line of the Ceres plugin, click on the action Settings.
    → The Ceres settings are opened.

  4. Click on the tab Files in the navigation tree on the left.
    → The file structure of the plugin is opened.

  5. Click on the folder resources.

  6. Click on the folder views.

  7. Click on the folder Widgets.

  8. Click on the folder Header.

  9. Click on the file TopBarWidget.twig.
    → The file is opened in the editor.

  10. After line 210, add the code below in a new line.

  11. Save () your changes.

<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && !$store.state.basket.showNetPrices"></div>
<div class="vat-change mb-2" v-if="!$store.state.basket.data.isExportDelivery && $store.state.basket.showNetPrices"></div>

Through these changes, the text you stored in the multilingualism entries itemInclVAT and itemExclVAT are also displayed in the basket preview of the headers you created via the ShopBuilder.

As an alternative, it is also possible to deactivate the basket preview via the widget settings of the top bar widget, thereby eliminating the need for this last adjustment.

Repairing or updating the Ceres plugin reverts the changes you made to the Ceres plugin.

6. Improving your Google Page Speed Insights rating

In this Best Practice you will learn which measures you can take to improve the Google Page Speed Insights performance rating of your plentyShop. In a first step, you will learn which of the standard Ceres functionality you can use in order to achieve higher PSI values. At a later point, this guide will also include modifications you can implement via a theme in order to attain a higher performance rating. The measures explicated below require no background in programming whatsoever.

The following chapters detail a number of adjustments you can make to your plentyShop that you can implement without the need to code:

6.1. Activating the Live Mode in the Ceres plugin

The Ceres plugin offers you the possibility to choose between the Development mode and the Live mode. In the development mode, you can use debbuging options and the plugin files are neither minimised nor bundled, which can negatively impact the performance of your plentyShop. We advise you to operate your oplentyShop in live mode, in order to increase the performance. Take the following steps to activate live mode:

Activate live mode:

  1. Open the menu Plugins » Plugin set overview.

  2. Select your plugin set.

  3. Click Edit plugin set.

  4. In the row of the Ceres plugin, click Settings.
    → The Ceres settings are opened.

  5. Click on the tab Logging and performance.

  6. Select the option Live mode for the setting Performance level.

  7. Save () the settings.

If you activate the live mode, the Ceres files are bundled and minimised, resulting in a quicker loading of the pages of your plentyShop.

6.2. Activating Vue Server-Side Rendering

With the release of Ceres v5.0.29, we’re introducing Vue Server-Side Rendering (SSR). SSR makes it possible that many components of the online shop are already processed on the server. Therefore, the browser receives pages that have already been rendered. The browser does not need to execute the received code again. This improves the rating of mobile pages in particular.

We added the setting Activate Vue Server-Sider Rendering to the plentyShop assistant and the Ceres settings in the Performance settings. You should initially activate this setting in a separate plugin set and test your shop thoroughly before you activate SSR for your productive system.

If you want to use SSR, you should also adjust the image widgets that you use on your pages. You have two important settings for image widgets at your disposal: Peloading and lazy loading. The following chapters explain how to optimise your image widgets.

6.3. Optimising image widgets

Image files are one of the major culprits for low shop performance. You should, if possible, only include as many image widgets on your plentyShop pages as you need for your purposes. A lower number of image widgets per page will positively impact the performance of your plentyShop.

6.3.1. Preloading images in the visible area

With the release of Ceres v5.0.29 we added the setting Preload image to the widgets image box, image carousel, background widget, and item image. This setting can only be used in combination with Server-Side Rendering (see above). By peloading images that are located in the initially visible viewport of your pages, you can significantly decrease the Largest Contentful Paint (LCP). The LCP is the largest rendered content element in the visible area. Usually, this is a large image.
You should activate the setting Preload image for all images that are visible on the page before the user scrolls further down the page. You can learn how to identify the Largest Contentful Paint on your pages below.

6.3.2. Activating lazy loading for images that are not initially visible

Additionally, we recommend that you activate the option Only load visible content in the widget settings of every widget that includes images. This option, the so-called "Lazy loading", makes sure that image files which are not visible upon the initial access of the relevant page are loaded at a later time. The initial loading time of your plentyShop pages is positively impacted by activating this option.
This setting is deactivated by default in the ShopBuilder presets.

If you use Server-Side Rendering (SSR), it is important that you only activate lazy loading for image widgets that are not located in the initially visible viewport.

6.3.3. Using modern image formats

Furthermore, we advise you to use modern image formats for the images you include in your plentyShop. For the widgets Background image, Image box, and Image carousel, we recommend that you use the input field Image selection to store images in the format WebP. If you store a WebP image, the additional input field Image selection for older browsers will be displayed, which serves to display fallback images in browsers, that are not yet compatible with modern image formats. If possible, we advise you to store images in JPEG format for these browsers.

6.3.4. Identifying the Largest Contenful Paint (LCP)

You can use PageSpeed Insights to identify the Largest Contentful Paint of your pages.

Identifying the LCP:

  1. Open PageSpeed Insights.

  2. Enter the URL of the page for which you want to identify the LCP.

  3. Click on Analyze. → The page analysis is started.

  4. After the analysis has been concluded, scroll down to the Diagnostics area.

  5. Click on Largest Contentful Paint element, to expand the section.

  6. The content element displayed there is the LCP of this page.

After you have identified the page’s LCP, you can now check if you:

  1. activated the setting Preloaded image in combination with SSR

  2. stored the image in WebP image format

  3. can decrease the image’s file size

These three measures can help you significantly in reducing the page’s Largest Contentful Paint.

6.4. Reducting the number of widgets

The number of widgets you include on each page is prone to negatively affecting the performance of your plentyShop. The larger the number of widgets per page, the slower the loading times. This is particularly applicable to image widgets and to widgets that necessitate a large quantity of item data. Each additional widget impacts the time to first full interactivity of the page.
We therefore recommend you use only as many widgets per page as is necessary for your purposes. On category pages, in particular, it is advisable to reduce the numver of displayed items, since category pages need to load large quantities of data and complex Javascript.

6.5. Activating the ShopBooster

The Time to first Byte (TTFB) is also part of the parameters evaluated by PSI, albeit to a small degree. In order to improve your TTFB values, you can activate the additional ShopBooster module for a fee. By activating the ShopBooster, page contents of your plentyShop are written into the cache, so that a second access to the page will benefit from greatly improved TTFB times.

The use of ShopBooster is particularly fruitful in combination with Server-Side Rendering (SSR), since using SSR can slightly increase the TTFB of your shop.

Additional costs

The activation of the ShopBooster comes at a fee. For each client, the additional costs amount to 0,004 € per 100 page accesses or page changes. A page access is the process in which one visitor or a webcrawler accesses a URL of your plentyShop. A page chance is triggered by one of the following processes:

  • Updating category or item data

  • Updating ShopBuilder pages

  • Deploying plugins

  • Saving the Ceres settings

  • Invalidating the cache by deactivating the ShopBooster

The additional costs of the ShopBooster amount to a maximum of 100€ per month per client.

Activating the ShopBooster:

  1. Open the menu Setup » Client » Select client » Webshop » ShopBooster.

  2. Click Activate ShopBooster.
    → A window is opened, informaing you about the additional costs involved.

  3. Click Confirm to activate the ShopBooster.
    → The notification ShopBooster has been activated is displayed.

6.6. Avoid invisible text caused by custom fonts

If you include custom fonts for your plentyShop and do not use the drsign settings of the ShopBuilder, it is possible that browsers try to display certain sections of text before the custom font is loaded. As a result, your plentyShop may be prone to a so-called Flash of invisible text (FOIT), meaning a short time during which the text you want to display cannot be displayed by the browser.

In order to avoit FOITS, you can use a CSS command to intermittenly display a system font instead of your custom font. to do so, you add the directive font-display: swap in your @font-face styles, for instance by using the Custom CSS/JS in the front end) plugin. You can thereby prevent annyoing FOITS to happen, which can have a positive impact on the PSI rating of your plentyShop.

6.7. Avoiding Javascript in code widgets

The ShopBuilder provides a code widget via which you can integrate additional adjustments that are not covered by ShopBuilder itself. If you want to inplement a piece of code, we advise you to avoid using Javascript in the code widget of the ShopBuilder. Instead, you can, for instance, use the Custom CSS/JS in the front end plugin or include the Javascript in a theme. Including additional Javascript in code widgets negatively impacts the loading times of your plentyShop.
If you integrate additional Javascript via an external plugin or a theme, we recommend that you place the Javascript at the lower end of the HTML body.

6.8. Linking payment plugins to the right containers

If you use payment plugins for your plentyShop that involve larger quantities of data (such as AmazonPay or PayPal), it is imperative for the performance of your plentyShop to link these plugins to the correct corresponding template containers. We added new template containers with the release of Ceres 5.0 in order to load Javascript and CSS of payment plugins only in the places that they are needed for the successful order process.
The plugin guides of the respective payment plugins, such as PayPal, already include detailed descriptions on how to link the contents of the plugins to the corresponding template containers. In general, you should link the Javascript of the payment method to the container Checkout.AfterScriptsLoaded and no longer to ScriptLoader.AfterScriptsLoaded. This can positively impact the performance of your plentyShop.

This Best Practice supports you in familiarising yourself with the various search options available in plentyShop, so that you can customise the online shop search for the purposes of your store.
The search settings are mainly carried out in the Search step of the Ceres assistant, which you can find at Setup » Assistents » Plugins » Select plugin set » plentyShop Ceres.

7.1. Sorting search results by relevance

The sorting value Relevance sorts search results in accordance with a numeric score that the plentymarkets system determines. The higher this numeric score, the higher the corresponding item’s position in the list of the search results. You can determine the calculation of the relevance score in 2 different places in the backend: The Ceres assistant hosts a slimmed version of this setting in the Search step under Priorisation of search values for the "Relevance" option. You can find the complete priorisation settings in the Setup » Item » Search » Front end » Search settings menu.

Here, you can activate item data fields that you want to be considered in the calculation of the Relevance score. If you activate the fields Name 1, Description, and Keywords, for instance, an item that includes the entered search term in all three item fields will be considered to be more relevant than an item that only contains the search term in its name. The first item will thus be displayed higher in the list of search results than the latter item.

You should deactivate the field Name (deprecated) This fields subsumes the three data fields Name 1, Name 2, and Name 3. You can exert more precise influence over the relevant sorting if you deactivate this field.

The boost of the individual data fields serves to determine the priorisation. The precise value of the individual boost fields is less important than the order of the boost values. If the boost value for the field Name 1 is higher than the value for Name 2, an item that includes the entered search term in the field Name 1 will receive a higher numeric relevance score than an item that includes the search term in the field Name 2.

The sorting by Relevance will usually list those search results first, that correspond to all of the entered search terms, followed by those results that only contain a part of the entered searchs terms.

Note that the item data fields you activate in the Consider in search suggestions area are automatically activated in the Consider in search results area, as well. If necessary, you can set the boost value of certain fields to 0 if you don’t want them to affect the Relevance sorting value.

The sorting value Recommended serves to sort search results in accordance to 3 values that you select and prioritise. You carry out these settings in the field Recommended sorting of search results in the Search step of the Ceres assistant.

The 3 sorting values interact with each other in the following way: Your items are first checked for the first sorting value; if 2 or more items would be sorted into the same position of the search results, the second value affects the sorting of the search results. If, as a result of the second sorting process, 2 or more items would be sorted into the same position, the third value becomes effective.

Example:
You’ve configured the recommended sorting of search results in your online shop in such a way that the first sorting value is Relevance, followed by Variation position as the second and Price (increasing) as the third value. A customer of your shop enters "Blue pants" as a search term. The search now goes over your entire item catalogue and assesses it according to the relevance sorting. The item data fields of your items are checked for both search terms ("blue" and "pants"). Depending on the item data fields you’ve activated for the Relevance sorting (name, description, etc.), multiple results may be returned that have the same (invisible) numeric relevance score. In the next step, the results are checked for their Variation position, which you either entered yourself or which is determined by the monthly sales. Finally, those results that have both the same relevance score and the same variation position are sorted by their price.

Currently, it is not possible to set up plentyShops in such a way that the search only functions as an "AND" search, i.e. that the search exclusively returns results that correspond to all search terms. However, the plentyShop search can simulate an "AND" search. For this, you need to select the sorting value Relevance for the setting Default sorting of search results in the Search step of the Ceres assistant. Alternatively, you can also select the sorting value Recommended, as long as Relevance is selected as the first value of the recommended sorting option.
That way, search results that contain all of the entered search terms are displayed first, followed by those that only correspond to parts of the search query. It is not possible to exclude the latter from the search.

To top