# Zwei Produkte nebeneinander Mobile

**URL:** <https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398>\
**Category:** Themes & Design\
**Created:** [7. Februar 2023 um 14:59 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398 "2023-02-07T14:59:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![eker](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@eker](https://forum.shopware.com/u/eker)\
**Post date:** [7. Februar 2023 um 14:59 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/1 "2023-02-07T14:59:27Z")

</div>

Hallo,

Ist es mittlerweile möglich, dass in Mobil Theme 2 Produkte nebeneinander angezeigt werden?

Grüße

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [7. Februar 2023 um 15:49 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/2 "2023-02-07T15:49:41Z")

</div>

Ja, das ging schon immer. Du musst lediglich die Klasse col-12 auf col-6 an den entsprechenden Stellen in der Erlebniswelt-Vorlage ändern. Sieht aber sehr bescheiden aus, ohne zahlreiche weitere CSS-Anpassungen vorzunehmen.

---

<div class="post-metadata">

**Author:** ![eker](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@eker](https://forum.shopware.com/u/eker)\
**Post date:** [8. Februar 2023 um 12:47 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/3 "2023-02-08T12:47:38Z")

</div>

Ich würde es gerne ausprobieren, aber wo soll ich es genau schreiben? In welcher Datei?

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [8. Februar 2023 um 14:05 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/4 "2023-02-08T14:05:27Z")

</div>

Habe mich geirrt, muss wohl doch im Template angepasst werden:

> <https://github.com/shopware/platform/blob/fb6659b867bfc1d2f3ed73b9ec135363f9c0f046/src/Storefront/Resources/views/storefront/component/product/listing.html.twig>

listingColumns ist die Variable. Die kann per

`{% set listingColumns = 'col-sm-6 col-lg-4 col-xl-3' %}`

überschrieben werden.

col-6 vor das col-sm-6 stellen.

---

<div class="post-metadata">

**Author:** ![eker](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@eker](https://forum.shopware.com/u/eker)\
**Post date:** [8. Februar 2023 um 14:52 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/5 "2023-02-08T14:52:20Z")

</div>

> [@Max\_Shop](#):
>
> {% set listingColumns = ‚col-sm-6 col-lg-4 col-xl-3‘ %}

Hallo,

Ich würde mich nicht als Profi nennen, also deswegen habe ich ehrlich gesagt nicht ganz verstanden.  
Das hier; {% set listingColumns = ‚col-sm-6 col-lg-4 col-xl-3‘ %} - wo soll ich es hinzufügen?  
In die Datei: listing.html.twig ?

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [8. Februar 2023 um 14:59 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/6 "2023-02-08T14:59:30Z")

</div>

Dieser Block wird in einer Datei „oberhalb“ (auf GitHub zu finden) definiert und je nach Sidebar unterschiedlich festgelegt.

Wenn du nun innerhalb der listig.html.twig dieses Set hinzufügst, dann überschreibt es das vorher festgelegte. Am besten in den Block

```auto
{% block element_product_listing_col %}
                                {% for product in searchResult %}
                                    <div class="cms-listing-col {{ listingColumns }}">
                                        {% block element_product_listing_box %}
                                            {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                                                'layout': boxLayout,
                                                'displayMode': displayMode
                                            } %}
                                        {% endblock %}
                                    </div>
                                {% endfor %}
                            {% endblock %}

```

packen. Direkt unter {% block element\_product\_listing\_col %}

---

<div class="post-metadata">

**Author:** ![eker](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@eker](https://forum.shopware.com/u/eker)\
**Post date:** [8. Februar 2023 um 15:45 UTC](https://forum.shopware.com/t/zwei-produkte-nebeneinander-mobile/98398/7 "2023-02-08T15:45:44Z")

</div>

> [@Max\_Shop](#):
>
> block element\_product\_listing\_col

Ich danke Ihnen, ich werde es ausprobieren