# Produktseiten Layout nicht auf Variantenebene anpassbar (Bilder + Text ersetzen)

**URL:** <https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810>\
**Category:** Shopware 6 (German)\
**Tags:** templates--design\
**Created:** [24. Mai 2023 um 13:45 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810 "2023-05-24T13:45:55Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [24. Mai 2023 um 13:45 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/1 "2023-05-24T13:45:55Z")

</div>

Hallo zusammen,

ich komme bei dem folgenden Problem nicht weiter:

Für die Produktseite habe ich ein eigenes Produktseitenlayout eingerichtet, welches auch Bilder enthält.  
Als Vorbild dient die folgende Darstellung von Produkten, bei der sich Artikelbilder und Text abwechseln, um das Produkt ansprechend in Szene zu setzen:

 ![Screenshot 2023-05-24 154228](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/a/0/a01b8da9c7370610b8ac2394de375c7e7e9e1fd8.jpeg)

Die Bilder und Texte können über den „Layout“ Tab im Artikel bequem ersetzt und angepasst werden. Dieses ist jedoch nur auf Produktebene möglich und nicht auf der Variantenebene!

Wenn ich nun aber rote und grüne T-Shirts verkaufe und diese als Variantenartikel konfiguriert habe, so möchte ich auch das grüne T-Shirt mit mehreren Bildern in der Artikelbeschriebung im Detail zeigen, genauso wie das rote.

Als eleganteste Lösung funktioniert dies bisher leider nur mit dem Cover Bild, indem ich im eigenen Produktseitenlayout als Bild über Datenzuordnung → „product.cover.media“ auswähle. So wird das (unterschiedliche) Cover Bild korrekt bei beiden Varianten angezeigt.  
Für weitere Bilder ist dies meines Wissens nicht möglich. Lassen sich auch die weiteren pro Produkt hinterlegten Bilder irgendwie im Layout ansteuern?

Oder ist andernfalls die Layoutänderung manuell doch auf Variantenebene realisierbar?

Ich bin dankbar für jede Anregung!

Viele Grüße  
Momme

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [25. Mai 2023 um 08:47 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/2 "2023-05-25T08:47:50Z")

</div>

Hallo Momme,

tatsächlich lässt sich meines Wissens nach das Layout nicht auf Variatenebene in einem Produkt ändern, falls du dieses Feature für sinnvoll hältst kannst du dazu gerne ein Ticket erstellen [https://issues.shopware.com/](https://issues.shopware.com/), bei genügend Votes wird es dann evtl. bei den nächsten Shopware Updates berücksichtigt.

Wenn du kurzfristig einen Workaround dafür suchst, würde ich dir empfehlen das Layout, welches du gerade mit dem Erlebniswelten-Editor erstellt hast, mit HTML in der Produktbeschreibung oder evtl. in einem Zusatzfeld ([Shopware 6 - Einstellungen - Zusatzfelder](https://docs.shopware.com/de/shopware-6-de/einstellungen/zusatzfelder)) nachzubauen.

Das sollte bei diesem einfachen Layout wie in dem Bild, kein großes Problem sein.

Viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [7. Juni 2023 um 10:27 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/3 "2023-06-07T10:27:43Z")

</div>

Hallo tom\_prok,

vielen lieben Dank für dein Feedback!

Ich habe den Ideenvorschlag zu Product Layouts auf Variantenebene bei Shopware eingereicht, siehe hier: [Shopware Anregung - Layout auf Variantenebene](https://feedback.shopware.com/forums/942607-shopware-6-product-feedback-ideas/suggestions/46747876-custom-product-layout-page-not-only-assignable-to)

Als Workaround klappt es bisher den entsprechenden html Code in die Produktbeschreibung zu kopieren. Dies ist jedoch nur semi-optimal, da Bild-URLs und auch Informationen, wie diese Bilder in den verschiedenen Auflösungen zu handeln sind (lazySizes) „hart“ mit kopiert wurden. Sollten die Artikelbilder angepasst werden, bedeutet dieses einen sehr hohen Anpassungsaufwand.

Die elegentere Möglicheit scheint mir die von dir beschriebene zu sein, die Informationen über Zusatzfelder in den Produkten zu hinterlegen. Hier habe ich Media-Felder, über welche Bilder zugeordnet werden können, und Texteditor-Felder verwendet. Die gute Nachricht: Ich kann diese auch auf Produkt-Variantenebene entsprechend befüllen!  
Jetzt habe ich gedacht könnte ich im Layout-Editor unter „Datenzuordnung“ (siehe Bild) auf die erstellten Zusatzfelder zugreifen. Dies ist jedoch nicht möglich, die Costum-Felder werden nicht angezeigt… Hast du eine Idee, wie ich auf die Zusatzfelder im Layout Editor wieder zugreifen kann?

Danke nochmals für deine tolle Hilfe!  
Viele Grüße  
Momme

 ![Screenshot 2023-06-07 122257](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/b/e/be13b68e0787e65d11e10bffa4cc5bf82cb102f3.jpeg)

Wie

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [7. Juni 2023 um 13:40 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/4 "2023-06-07T13:40:28Z")

</div>

Hallo Momme,

> In den Erlebniswelten kann man ohne Plugin keine Zusatzfelder abfragen (mein Wissensstand). Entweder über ein Plugin, dass twig in der Erlebniswelt zulässt oder per CMSResolver selber bereitstellen.

> [@Zusatzfelder auf Datenzuordnung in Produktlayout (Erlebniswelt) anzeigen](https://forum.shopware.com/t/zusatzfelder-auf-datenzuordnung-in-produktlayout-erlebniswelt-anzeigen/92837/2):
>
> Es gibt kein „altes“ Template-System. Die Ergebniswelten werden in das Template-System twig eingebunden. In den Erlebniswelten kann man ohne Plugin keine Zusatzfelder abfragen (mein Wissensstand). Entweder über ein Plugin, dass twig in der Erlebniswelt zulässt oder per CMSResolver selber bereitstellen.

Daran hat sich bis heute aber glaube ich nichts geändert… leider.

Am besten fügst du den Inhalt aus den Zusatzfeldern also meiner Meinung nach über das Theme ein:

> **[Shopware 6 - Tutorials und FAQ - Änderungen am Template vornehmen](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/aenderungen-am-template-vornehmen#zusatzfelder-in-der-storefront-ausgeben)**
>
> Hier erklären wir Dir, wie Du ein eigenes Shopware 6-Theme anlegen und Anpassungen daran, z.B. an den Dokumenten, vornehmen kannst. Das Standard-Theme sollte nicht angepasst werden, da die Änderungen bei einem Update überschrieben werden.

Viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [7. Juni 2023 um 13:57 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/5 "2023-06-07T13:57:45Z")

</div>

Hallo tom\_prok,

vielen Dank für deine Antwort! Die Lösung über ein Plugin wäre doch gar kein Problem! Das habe ich lieber als selbst im Code etwas zu ändern ohne genau zu wissen was ich tue…  
Dieses twig-Plugin ist doch super bewertet und dazu noch kostenlos: [twig-Plugin](https://store.shopware.com/moorl29420842994f/html-erlebniswelten-element-mit-twig-compiler.html)

D.h. ich gehe folgendermaßen vor:

1. Ich baue das Layout im Grid System in den Erlebniswelten nach.
2. In das Grid wird das neue „twig / html“ Element reingezogen.
3. In dem neuen Element wird twig-Code hinterlegt, der den Bezug zu den Zusatzfeldern herstellt.

Somit kann ich mit einem allgemein gültigen Layout pro Produktvariante auf die jeweiligen individuellen Inhalte (Bilder / Texte) der Zusatzfelder zurückgreifen.

Jetzt muss ich nur noch rausfinden wie die twig-Zuordnung funktioniert, ich habe noch nie mit twig gearbeitet. Ich versuche es mal mit dem Code aus dem Shopware 6 Tutorial „Änderungen am Template“, den du gepostet hast…

Das sollte es sein oder?

Tausend Dank nochmal!  
Viele Grüße  
Momme

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 06:18 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/6 "2023-06-08T06:18:35Z")

</div>

Hallo Momme,

das Plugin habe ich so noch nie genutzt, aber schon viel Gutes darüber gehört. Der Plugin Entwickler ist auch sehr aktiv hier im Forum, also falls es Probleme gibt, hilft er dir mit ein bisschen Glück auch weiter.

Theoretisch sollte das aber so funktionieren, wie du dir es vorstellst. Um den Inhalt aus dem Zusatzfeld anzeigen zu lassen, musst du nur die Variabel in Twig einbauen:

`{{ page.product.translated.customFields.technischerNamedeinesZusatzfeldes }}`

Und am besten noch eine if Abfrage hinzufügen, sonst kommt es evtl. zu Fehlern, wenn die Variabel nicht gesetzt ist:

```auto
{% if page.product.translated.customFields.technischerNamedeinesZusatzfeldes %}
{{ page.product.translated.customFields.technischerNamedeinesZusatzfeldes }}
{% endif %}

```

Viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [8. Juni 2023 um 11:14 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/7 "2023-06-08T11:14:41Z")

</div>

Hallo Tom,

vielen Dank für deine abermalige Hilfe! Ich habe deine Vorschläge umgesetzt und bin ein gutes Stück weiter gekommen!

Die Inhalte der Zusatzfelder werden dank des Plugins korrekt ausgelesen, so sieht es im Frontend aus:

 ![Screenshot 2023-06-08 115928](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/f/3/f35c57e96da9cc4a09a1a78ee67a4cdd656db362.jpeg)

Deinen Code, den ich im Twig-Element unter html hinterlegt habe sieht so aus:

{% if page.product.translated.customFields.technischerNameMeinesTEXTZusatzfeldes%}  
{{ page.product.translated.customFields.custom\_product\_description\_grid\_text1 }}  
{% endif %}

bzw.

{% if page.product.translated.customFields.technischerNameMeinesBILDZusatzfeldes%}  
{{ page.product.translated.customFields.custom\_product\_description\_grid\_text1 }}  
{% endif %}

Daraus ergeben sich zwei Fragen für mich:

1. Wie schaffe ich es, dass der html-Text auch in html kompiliert ausgegeben wird?
2. Bei der Bildausgabe ist mir klar, dass ich den twig code noch in das img src=„“ Element einbauen muss. Hier unterscheidet sich die Ausgabe des Zusatzfeldes (ich denke ein Hash, siehe oben) nur komplett von dem benötigen Pfad des Bildes.

Ich wäre über jede Hilfe dankbar!  
Viele Grüße,

Momme

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 12:25 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/8 "2023-06-08T12:25:35Z")

</div>

Hallo Momme,

um das HTML aus deiner Variabel richtig anzuzeigen, musst du den Raw-Filter zur Variabel hinzufügen, so:

```auto
{{ page.product.translated.customFields.custom_product_description_grid_text1|raw }}

```

Wenn du die Variabel für das Bild einfach so ausgibst, erhältst du die Media-Id „ich denke ein Hash“, damit musst du dir mit der searchMeida-Funktion die URL zum Bild holen: [Using custom fields of type media - Shopware Developer](https://developer.shopware.com/docs/guides/plugins/plugins/plugin-fundamentals/custom-fields-of-type-media)

Wie heißen den deine beiden Zusatzfelder bisher?  
Text: custom\_product\_description\_grid\_text1 ?  
Bild: ?

Dann erstelle ich dir mal den kompletten Twig Code, ist relativ einfach, wenn man weiß, wie es geht 😅

Viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [8. Juni 2023 um 12:28 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/9 "2023-06-08T12:28:21Z")

</div>

Hallo Tom,

vielen Dank, das probiere ich einmal aus! Meine beiden Zusatzfelder heißen:

Text: custom\_product\_description\_grid\_text1  
Bild: custom\_product\_description\_grid\_picture1

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 12:34 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/10 "2023-06-08T12:34:35Z")

</div>

Guck mal ob es so geht:  
Text:

```auto
{% if page.product.translated.customFields.custom_product_description_grid_text1 %}
    {{custom_product_description_grid_text1|raw}}
{% endif %}

```

Bild:

```auto
{% if page.product.translated.customFields.custom_product_description_grid_picture1 %}

    {% set mommeMediaId = page.product.translated.customFields.custom_product_description_grid_picture1 %}
    {% set mediaCollection = searchMedia([mommeMediaId], context.context) %}
    {% set mommeMedia = mediaCollection.get(mommeMediaId) %}

    <img src="{{mommeMedia.url}}">

{% endif %}

```

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [8. Juni 2023 um 12:45 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/11 "2023-06-08T12:45:01Z")

</div>

Vielen Dank, Tom, die korrekte Ausgabe des Textes funktioniert im Frontend 🤩

Das „|raw}“ war entscheidend, da wäre ich nie drau gekommen!

Auch das Bild funktioniert, ich bin begeistert!!!

 ![Screenshot 2023-06-08 144001](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/a/9af7e1e1ec451afa8a30f73c117f9b837cf663f9.jpeg)

Jetzt muss ich nur noch im img-Tag dafür sorgen, dass das Bild nicht in Originalgröße angezeigt wird, sondern auf die Grid-Höhe begrenzt ist…

Tausend Dank, du hast mein Problem komplett gelöst! Jetzt kann ich den Code an verschiedenen Stellen im Webshop einsetzen.

Danke nochmals und viele Grüße  
Momme

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 12:53 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/12 "2023-06-08T12:53:22Z")

</div>

Freut mich wenn ich helfen konnte 👍

Kleiner Tipp: Um das Bild auf die Grid höhe zu begrenzen verwendest du am besten die Boostrap Klassen.

```auto
<img class="mh-100" src="{{mommeMedia.url}}">

```

Oder google mal nach Boostrap Class object fit, da musst du nur darauf achten die richtige Boostrap version auszuwählen, bis Shopware 6.4 Boostrap 4.X, ab Shopware 6.5 Boostrap 5.X

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [8. Juni 2023 um 14:01 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/13 "2023-06-08T14:01:25Z")

</div>

Hallo Tom,

um das Thema einmal zu vervollständigen und abzuschließen:  
Die Bildgröße lässt sich in meinem Fall nicht mit dem Bootstrap Element „mh-100“ ändern. Das Bild wird weiterin in Originalgröße dargestellt, das Grid-Element richtet sich wahrscheinlich nach der Bildergröße.  
Ich kann das Bild händisch über style=„width: 800px“ begrenzen. Es wird im Hintergrund allerdings natürlich immer die Originalgröße geladen, was gerade bei mehreren Bildern natürlich auf die Performance geht.

Hierzu habe ich den folgenden Abschnitt in der Doku gefunden, der beschreibt, wie die Bilder als Thumbnails geladen werden können: [Working with sw\_thumbnail](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/use-media-thumbnails#working-with-sw_thumbnail)

Ich versuche den Code in unser Beispiel einzubauen, komme aber nicht weiter:

{% sw\_thumbnails ‚my-thumbnails‘ with {  
media: cover,  
sizes: {  
‚xs‘: ‚501px‘,  
‚sm‘: ‚315px‘,  
‚md‘: ‚427px‘,  
‚lg‘: ‚333px‘,  
‚xl‘: ‚284px‘,  
}  
} %}

Wahrscheinlich ist die Lösung wieder ganz einfach 🙃

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 14:06 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/14 "2023-06-08T14:06:11Z")

</div>

Dann wäre es wahrscheinlich am einfachsten das Bild in 800px breite abzuspeichern 😅  
sw\_thumbnails wäre für diese Anwendung wahrscheinlich etwas übertrieben

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [8. Juni 2023 um 14:21 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/15 "2023-06-08T14:21:19Z")

</div>

Die Bilder, die ich unten in der erweiterten Artikelbeschriebung nochmals einbinden möchte, sind die Artikelbilder, die oben in der Galerie dargestellt werden. D.h., die Bilder liegen schon in der Originalgröße 1920x1920 vor.

Warum wäre „sw\_thumbnails“ übertrieben? Ist dies zu datenbanklastig oder zu kompliziert einzubinden?

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. Juni 2023 um 15:26 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/16 "2023-06-08T15:26:23Z")

</div>

Zu einem habe ich damit bisher kaum gearbeitet und weiß nicht so richtig wie das funktioniert 😅 zum anderen führst du damit ja wieder Twig code, Abfragen aus, obwohl es sich auch mit CSS lösen lässt. Obwohl es natürlich Sinn macht die Bilder schon in der richtigen Größe bereitzustellen.  
Aber probiere das ruhig mal mit sw\_thumbnails, vielleicht kann dann noch was lernen. 🙂

Du kannst auf jeden Fall in der Medienverwaltung bei dem Ordner für die Produktmedien die Thumbnail-Größen festlegen:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/4/b/4b7938b72c6b4725d2b8c13548988c38c7f6c5d7.png)

---

<div class="post-metadata">

**Author:** ![MoApo](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@MoApo](https://forum.shopware.com/u/MoApo)\
**Post date:** [9. Juni 2023 um 09:25 UTC](https://forum.shopware.com/t/produktseiten-layout-nicht-auf-variantenebene-anpassbar-bilder-text-ersetzen/99810/17 "2023-06-09T09:25:48Z")

</div>

Ich melde mich, falls ich eine Lösung für die Thumbnail-Bilder finde!  
Vielen Dank nochmals für deine Hilfe, ich bin begeistert, wie gut es jetzt funktioniert!! 👏 👏