Highlight products with a product slider

With a product slider, you can highlight specific products in your shop, for example, new products, top sellers, or on sale products. In the Editor of your shop, you will find the product slider as a content element that you can add to a page.

Skip to:

• How to add a product slider
• Add a text to highlight your product selection
• Adjust the product image size
• Remove a product from the product slider

How to add a product slider

You would like to add a product slider to a page and determine the products you would like to showcase? Here's how:

1. In the sidebar of the administration, navigate to Editor.
2. You will see a list of your pages in the sidebar of your Editor under Pages. Select the page to which you would like to add the product slider or add a new page. A preview of the page will be shown on the right-hand side.
3. Select Content elements in the sidebar of the Editor.
4. Select the category Products.
5. Drag and drop the content element Product slider into the preview area. You can only drop content elements into the blue areas of the page.
6. Select Add products
   The view Add products to product slider appears. Here you can assign up to twelve products to the product slider.
7. Use the field Search and assign to find the products you would like to highlight. Select the search field to see a list of the products that can be assigned. You can also search for specific products by name and by product number.
8. Select Save once you're done with assigning products to the product slider.

The product slider with your assigned products has been added to the page.

Add a text to highlight your product selection

Select the text area ("Type here") of the content element and make use of the formatting options for texts to craft a teaser text that matches the products you've chosen.

Adjust the product image size

Once you've added a product slider to a page, you can change the look of this product slider and define how many products should be displayed at the same time. That's how you do it:

1. In the sidebar of the administration, navigate to Editor.
2. Navigate to the page displaying the product slider for which you would like to adjust the product image size.
3. Select the product slider or hover over it with your mouse.
4. Select .
5. Select the tab
6. Select your desired product image size. You can choose between three different sizes: S (Small), M (Medium), and L (Large).
   Depending on your selected option, the size of the product images will be adjusted. If you select S, the images will be smaller and thus, more images will be shown at the same time. If you select L, the images will be larger and thus, fewer images will be shown at the same time. The default setting is M. A preview of the product slider with the currently selected product image size is immediately visible on the page in the background.
   You can hold down in the upper right corner of the product slider overlay and move the overlay to see different parts of the page in the background.
7. Select Save.

The size of the product images in the product slider has been adjusted.

Depending on the device your visitors are using (e.g. smartphone or laptop), the number of images displayed at the same time may vary slightly. This allows a responsive design of your shop and ensures that the different product images look nice on the different devices and screen sizes.

Remove a product from the product slider

1. In the sidebar of the administration, navigate to Editor.
2. Navigate to the page displaying the product slider from which you would like to remove a product.
3. Select the product slider or hover over it with your mouse.
4. Select .
5. Select  to remove a product from the product slider.
6. Select Save.

The product has been removed from the product slider.