# Produktkonfigurator - PNGs übereinander legen

**URL:** <https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615>\
**Category:** Shopware 3.5\
**Tags:** programming\
**Created:** [25. September 2014 um 13:44 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615 "2014-09-25T13:44:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aerrox](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@aerrox](https://forum.shopware.com/u/aerrox)\
**Post date:** [25. September 2014 um 13:44 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/1 "2014-09-25T13:44:52Z")

</div>

Hallo liebe Shopware Community! Ich bekomme es nicht hin, beim Variantenwechsel meine Bilder (PNGs) übereinander zu legen, so dass ein Gesamtbild entsteht. Es soll auf ein Hintergrundbild, PNGs draufgelegt werden können, so dass beim Variantenwechsel sich die PNGs auch wechseln und nicht direkt das ganze Bild. Sollte eine Art Produktkonfigurator werden. Beispiel: [http://codecanyon.net/item/woocommerce- … ew/7784091](http://codecanyon.net/item/woocommerce-product-configurator/full%5C_screen%5C_preview/7784091) Hat jemand eine Idee zur Programmierung der Galerie/Bilder oder gibt es ein günstiges Tool? Würden nur ungern wechseln zu WordPress nur weil man hier keinen richtigen Konfigurator hinkriegt. Beste Grüße AERROX

---

<div class="post-metadata">

**Author:** ![aerrox](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@aerrox](https://forum.shopware.com/u/aerrox)\
**Post date:** [26. September 2014 um 19:11 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/2 "2014-09-26T19:11:59Z")

</div>

Welche Änderungen müsste man an der Datei vornehmen: /\_default/fronted/detail/images.tpl [code]{\* Main picture \*}

{if $sArticle.image.src.1} {else} {/if} {foreach from=$sArticle.images item=sArticleImage} {if $sArticleImage.relations}  
{if $sArticleImage.src.1} {else} {/if}  
{/if} {/foreach}  
{\* Variant picture \*} {\*if $sArticle.image.res.relations}  
 ![{$sArticle.articleName}]( "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")   
{/if\*} {\* Thumbnails \*} {if $sArticle.images}  
&nbsp;

&nbsp;

{if $sArticle.image.src.4} {/if} {foreach from=$sArticle.images item=sArticleImage} {if $sArticleImage.relations} {\* Main picture variant \*}  
 ![]( "{if $sArticleImage.res.description}{$sArticleImage.res.description}{else}{$sArticle.articleName}{/if}")  
{\* Thumbnail variant \*} {else} {/if} {/foreach}  
&nbsp;

&nbsp;  
{/if}[/code] Irgendwo bei {\* Variant picture \*}??? Besten Dank und schöne Grüße AERROX

---

<div class="post-metadata">

**Author:** ![Shopware\_Solutions\_A](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@Shopware\_Solutions\_A](https://forum.shopware.com/u/Shopware_Solutions_A)\
**Post date:** [26. September 2014 um 20:16 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/3 "2014-09-26T20:16:35Z")

</div>

Hallo, du könntest versuchen dem div einen Style-Background-Tag für das zu überlagernde PNG hinzuzufügen style=„background:url($sImagevariable) no-repeat;“ oder auch eine Javascriptlösung zu verwenden. {\* Variant picture \*} {\*if $sArticle.image.res.relations}

![{$sArticle.articleName}]( "{if $sArticle.image.res.description}{$sArticle.image.res.description}{else}{$sArticle.articleName}{/if}")   
{/if\*} Viele Grüße

---

<div class="post-metadata">

**Author:** ![Shopware\_Solutions\_A](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@Shopware\_Solutions\_A](https://forum.shopware.com/u/Shopware_Solutions_A)\
**Post date:** [26. September 2014 um 20:26 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/4 "2014-09-26T20:26:23Z")

</div>

Wahrscheinlich wäre es auch möglich zwei ![]() mit position:absolute; top:0; left:0; in dem übergeordneten

bzw. zu überlagern. Das übergeordnete Element muss dann evtl position:relative; oder ebenfalls position:absolute; sein. Viele Grüße

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [27. September 2014 um 00:16 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/5 "2014-09-27T00:16:25Z")

</div>

Gibts mal einen Link zur Seite ? Kenne so den Konfigurator nicht aus dem Stehgreif

---

<div class="post-metadata">

**Author:** ![schnetter](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@schnetter](https://forum.shopware.com/u/schnetter)\
**Post date:** [6. Oktober 2014 um 11:49 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/6 "2014-10-06T11:49:21Z")

</div>

Hallo zusammen, gibt es hierfür bereits eine Lösung? Gerne auch als Plugin 😛 Gruß Joël Schnetter

---

<div class="post-metadata">

**Author:** ![aerrox](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@aerrox](https://forum.shopware.com/u/aerrox)\
**Post date:** [22. Juli 2015 um 03:16 UTC](https://forum.shopware.com/t/produktkonfigurator-pngs-ubereinander-legen/22615/7 "2015-07-22T03:16:04Z")

</div>

Genau das hier stelle ich mir vor: [http://www.evilcontrollers.com/ps4-cont … eator.html](http://www.evilcontrollers.com/ps4-controller-creator.html) Wie schafft man das?