Skip to content

How-To Guide

This guide provides step-by-step workflows for common tasks with Product Slider Advanced.

How the Plugin Works

Data Flow Overview

The plugin extends the Shopware CMS editor with a new block type for product and category sliders.

[Shopping Experience Editor] → [Configure Block] → [Select Data Source] → [Storefront Display]

Example Flow: 1. You add the "Product Slider Advanced" block to a Shopping Experience 2. You select a content type (products, category, etc.) 3. The plugin loads the corresponding products/categories at runtime 4. The content is displayed responsively in the slider

Common Workflows

How to: Create a Bestseller Slider on the Homepage

Goal: Display a manually curated slider with your top products on the homepage.

Prerequisites: - Active products in the shop - Access to the homepage Shopping Experience

Steps:

  1. Open Shopping Experience
  2. Navigate to: Content → Shopping Experiences

  3. Open the homepage Shopping Experience

  4. Add Block

  5. Click on a section
  6. Under "Commerce", select the Product Slider Advanced block

  7. Drag the block to the desired position

  8. Select Products

  9. Click on the slider element
  10. Select Content type: Manual products

  11. Search for your bestsellers and select 6-10 products

  12. Configure Teaser as Headline

  13. Switch to the Slider Teaser tab
  14. Enable Show teaser as headline

  15. Enter "Our Bestsellers" as the headline

  16. Adjust Settings

  17. Switch to the Settings tab
  18. Set Navigation arrows to On

  19. Set Automatic sliding to Off (optional)

  20. Save and Review

  21. Save the Shopping Experience
  22. Open the storefront and check the result

Result: A slider with the heading "Our Bestsellers" and your selected top products.

How to: Create a Category Overview for the Homepage

Goal: Present main categories as visual cards in a slider.

Prerequisites: - Categories with images configured - Categories have descriptions

Steps:

  1. Insert Block
  2. Navigate to: Content → Shopping Experiences

  3. Add the Product Slider Advanced block

  4. Choose Categories as Content Type

  5. Click on the element
  6. Select Content type: Categories

  7. Select your main categories (e.g., "Women", "Men", "Accessories")

  8. Style Category Boxes

  9. Set Category box background color to match your design
  10. Choose a readable Text color

  11. Limit the description to about 80 characters

  12. Add Teaser (optional)

  13. Enable Show teaser
  14. Upload a suitable image

  15. Add headline "Our Categories" and a link to the category overview

  16. Optimize Slider Settings

  17. Set Max. items displayed to the number of your categories
  18. Enable Infinite loop only with more than 3 categories

Result: A visually appealing category slider that quickly guides customers to main areas.

How to: Set Up an Automatic "Deals of the Week" Slider

Goal: Create a slider that automatically displays discounted products.

Prerequisites: - A dynamic product group with price rules created

Steps:

  1. Create Dynamic Product Group (if not already done)
  2. Navigate to: Catalogues → Dynamic Product Groups
  3. Click New dynamic product group
  4. Name: "Deals of the Week"
  5. Add a condition: "Product → Is discount" = Yes

  6. Save the product group

  7. Insert Slider in Shopping Experience

  8. Open your Shopping Experience

  9. Add the Product Slider Advanced block

  10. Link Product Group

  11. Select Content type: Dynamic product group
  12. Select your created product group "Deals of the Week"

  13. Set Max. items displayed to 8-12

  14. Design Teaser with Call-to-Action

  15. Enable the teaser
  16. Upload an attractive "Sale" image
  17. Headline: "Deals of the Week"
  18. Link text: "All Deals"

  19. Link target: /deals/ (or your sale category)

  20. Enable Automatic Sliding (optional)

  21. Enable Automatic sliding
  22. Set the speed to 3000ms

Result: A self-updating slider that always shows current deals.

How to: Create a Hero Area with Teaser and Products

Goal: Create a prominent slider with a large teaser image and products.

Steps:

  1. Insert Full-Width Block
  2. Create a full-width section

  3. Add the Product Slider Advanced block

  4. Design Prominent Teaser

  5. Enable Show teaser
  6. Set Width of teaser to 40%
  7. Upload a high-quality campaign image

  8. Select Display mode: Cover

  9. Teaser Overlay for Readability

  10. Set Teaser overlay color to rgba(0, 0, 0, 0.3) for dark text
  11. Or rgba(255, 255, 255, 0.5) for light text

  12. Adjust Teaser font color accordingly

  13. Teaser Content

  14. Headline: "New Collection 2024"
  15. Text: "Discover the latest trends"
  16. Link text: "Shop Now"

  17. Link target: URL to the collection

  18. Select Products

  19. Choose 6-8 highlight products from the collection

  20. Adjust Height

  21. Set Max. height of slider to 450-550px
  22. Enable Navigation arrows

Result: A visually impressive hero area with campaign teaser and products.

How to: Create a Mobile-Optimized Slider

Goal: Configure a slider that looks optimal on all devices.

Steps:

  1. Set Teaser Behavior on Mobile
  2. Decide: Show or hide teaser on mobile?
  3. For complex teaser: Choose "Hide"

  4. For simple teaser: Choose "Show above slider"

  5. Configure Edge Padding

  6. Edge padding: 30px (Desktop)

  7. Edge padding on mobile devices: 10px

  8. Adjust Element Width

  9. Set Slider item width to 280px

  10. This ensures optimal display on small screens

  11. Check Navigation

  12. Enable Navigation arrows for desktop

  13. Disabled arrows allow touch swipe on mobile

  14. Test on Different Devices

  15. Open the storefront
  16. Use browser developer tools for mobile view
  17. Check touch gestures and readability

Result: A responsive slider that works optimally on desktop, tablet, and smartphone.

Quick Reference

Task Key Steps Required Settings
Bestseller Slider Manual selection, Teaser as headline Content type: Manual, Teaser as headline
Category Overview Select categories, adjust colors Content type: Categories, Box colors
Auto-Update Deals Link Product Stream Content type: Dynamic product group
Hero with Teaser Teaser 40%, large image Teaser active, Width 40%, Overlay
Mobile-Optimized Edge padding, Element width Mobile edge padding, Element width 280px

Best Practices

  1. Limit Product Count: 8-12 products are ideal for performance and clarity
  2. Use High-Quality Images: Especially for the teaser area and category sliders
  3. Test on Mobile Devices: The majority of users shop on mobile
  4. Keep Texts Short: Limit category descriptions to 80-100 characters
  5. Consistent Styling: Match colors to your shop design

What to Avoid

  • Loading too many products (over 15) - impacts loading time
  • Setting automatic scrolling too fast (under 2000ms)
  • Enabling teaser without an image - looks incomplete
  • Inconsistent product images - use uniform image sizes
  • Duplicate sliders on one page with the same products