# Product Slider 3 statt 4 Artikel in einer Reihe

**URL:** <https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336>\
**Category:** Programmierung\
**Tags:** customelements, shopping-worlds, widgets\
**Created:** [4. Dezember 2019 um 10:58 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336 "2019-12-04T10:58:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxplex](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@maxplex](https://forum.shopware.com/u/maxplex)\
**Post date:** [4. Dezember 2019 um 10:58 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/1 "2019-12-04T10:58:44Z")

</div>

Hat einer ein Beispiel wie es umzusetzen ist, das man im Product slider nur max. 3 Artikel statt 4 in einer Reihe hat?

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [4. Dezember 2019 um 11:07 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/2 "2019-12-04T11:07:11Z")

</div>

Du meinst 4 statt 3 im Desktop? Weil 3 ist ja Standard oder? Dazu musst du in der&nbsp;

**views/element/cms-element-product-listing.html.twig**

die cols/listingColumns ändern.

---

<div class="post-metadata">

**Author:** ![maxplex](https://avatars.discourse-cdn.com/v4/letter/m/839c29/32.png) [@maxplex](https://forum.shopware.com/u/maxplex)\
**Post date:** [4. Dezember 2019 um 21:12 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/3 "2019-12-04T21:12:00Z")

</div>

> [@brettvormkopp schrieb:](https://forum.shopware.com/profile/6611/brettvormkopp "brettvormkopp")
> 
> Du meinst 4 statt 3 im Desktop? Weil 3 ist ja Standard oder? Dazu musst du in der&nbsp;
> 
> **views/element/cms-element-product-listing.html.twig**
> 
> die cols/listingColumns ändern.

Ne, ich meine ja den Product Slider. Ich habe den bei mir auf der Startseite mit momentan 9 Artikeln zum Test. Vier Stück werden immer gleichzeit angezeigt. Ich möchte allerdings, das maximal 3 gleichzeitig angezeigt werden, damit ein Produkt zentriert in der Mitte und eines Rechts und eines Links ist.&nbsp;

---

<div class="post-metadata">

**Author:** ![matce84](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@matce84](https://forum.shopware.com/u/matce84)\
**Post date:** [8. September 2021 um 12:23 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/4 "2021-09-08T12:23:59Z")

</div>

Hallo zusammen,

ich möchte gerne das gleiche wie maxplex machen.

Auf der Produktdetail Seite  
Standard Produktseite-Layout  
Cross selling  
Den Product slider von 4 Artikel auf 3 Artikel.

Hat Jemand dafür eine Lösung oder kann mir einen Tipp geben?

Vielen Dank für eure Mühe und Zeit.

Ich nutze Shopware 6.4.4.0

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [9. September 2021 um 06:15 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/5 "2021-09-09T06:15:25Z")

</div>

Du kannst in den Settings für den Produktslider die Mindestbreite für ein Produktelement angeben (Minimal width):

 ![Screenshot 2021-09-09 at 08-04-40 Home Shopping Experiences Shopware Administration](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/1/126eb397343d4b6f8a13cbd7290357baf57274c4.png)

D.h. als Berechnung: ( Containerbreite des Sliders / Anzahl an sichtbaren Produkten ) - Gutter  
Gutter ist in `Resources/views/storefront/element/cms-element-product-slider.html.twig` fix auf 30px gesetzt.

Ich habe z.B. ein Layout mit einer von 1230px.  
Also: 1230px / 3 = 410px - 30px = 380px  
Minimal width muss bei mir auf maximal 380px, damit drei Produkte in einem Slide angezeigt werden.

---

<div class="post-metadata">

**Author:** ![great2gether](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/great2gether/32/12887_2.png) [@great2gether](https://forum.shopware.com/u/great2gether)\
**Post date:** [18. Januar 2025 um 16:44 UTC](https://forum.shopware.com/t/product-slider-3-statt-4-artikel-in-einer-reihe/63336/6 "2025-01-18T16:44:11Z")

</div>

So evtl. - im Child-Theme muss die neue Datei rein: cms-element-product-slider.html.twig

```auto
{% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}

{% block element_product_slider %}
    {% if not sliderConfig %}
        {% set sliderConfig = element.fieldConfig.elements %}
    {% endif %}
    {% if element.data.products.elements %}
        <div
            class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
            {% block element_product_slider_alignment %}
                {% if config.verticalAlign.value %}
                    <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
                {% endif %}

                {% set productSliderOptions = {
                    productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
                    slider: {
                        gutter: 30,
                        autoplayButtonOutput: false,
                        nav: false,
                        mouseDrag: sliderConfig.navigation.value ? false : true,
                        controls: sliderConfig.navigation.value ? true : false,
                        autoplay: sliderConfig.rotate.value ? true : false,
                        responsive: {
                            xs: { items: 1 },
                            sm: { items: 2 },
                            md: { items: 3 },
                            lg: { items: 4 }
                        }
                    }
                } %}

                {% block element_product_slider_slider %}
                    {{ parent() }}
                {% endblock %}
                {% if config.verticalAlign.value %}
                    </div>
                {% endif %}
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}

```