# Bilder unter Warenkorb-Button

**URL:** https://forum.shopware.com/t/bilder-unter-warenkorb-button/36368
**Category:** Themes & Design
**Created:** [27. April 2016 um 07:13 UTC](https://forum.shopware.com/t/bilder-unter-warenkorb-button/36368 "2016-04-27T07:13:18Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)
#### Post date: [27. April 2016 um 07:13 UTC](https://forum.shopware.com/t/bilder-unter-warenkorb-button/36368/1 "2016-04-27T07:13:18Z")

</div>

Hallo,

&nbsp;

ich möchte ein paar Hinweise als Bild unter dem Warenkorb-Button einfügen.

Meine Vorgehensweise:  
eine eigene index.tpl in&nbsp;frontend/detail ablegen,  
eine eigene detail.less in&nbsp;frontend/\_public/src/less/\_modules ablegen und die all.less erweitern.  
In der index.tpl möchte ich diesen Block anpassen:

```
{* Detailseite erweitern *}
{extends file='parent:frontend/detail/index.tpl'}

{block name='frontend_detail_index_buy_container_base_info' append}

```

Ist die Vorgehensweise richtig, bzw. bin ich in den richtigen Ordnern und habe ich den richtigen Block?

---

<div class="post-metadata">

### Author: ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)
#### Post date: [27. April 2016 um 11:14 UTC](https://forum.shopware.com/t/bilder-unter-warenkorb-button/36368/2 "2016-04-27T11:14:00Z")

</div>

habe es jetzt hinbekommen wie beschrieben. Einzige Problem: WIe bekomme ich die Bilder in der horizontalen Liste zentriert?

Ich habe es auch schon mit einem DIV-Container probiert, geht aber auch nicht.  
Meine Less:  
&nbsp;

```
.image-container{
  text-align: center;
  margin: 0 auto;
}

.image-plus {
  box-sizing: border-box;
  height: 100px;
  width: 100%;
  clear: both;
  .unitize-height(60, 16);

  li {
    box-sizing: border-box;
    float: left;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
      }

@media screen and (min-width: @phoneLandscapeViewportWidth) { // View für Tablets und Desktops
.unitize-height(80, 16);
}
}

```

&nbsp;