# Produktetext ansprechender formatieren

**URL:** <https://forum.shopware.com/t/produktetext-ansprechender-formatieren/89044>\
**Category:** Themes & Design\
**Tags:** programming, themes--design\
**Created:** [10. Juli 2021 um 09:39 UTC](https://forum.shopware.com/t/produktetext-ansprechender-formatieren/89044 "2021-07-10T09:39:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mercator](https://avatars.discourse-cdn.com/v4/letter/m/e95f7d/32.png) [@Mercator](https://forum.shopware.com/u/Mercator)\
**Post date:** [10. Juli 2021 um 09:39 UTC](https://forum.shopware.com/t/produktetext-ansprechender-formatieren/89044/1 "2021-07-10T09:39:50Z")

</div>

Ich habe mal folgende Fragen an die CSS Experten. Ich stolperte heute über einen mit Shopware erstellten Shop, welcher die Produkteseite sehr übersichtlich und ansprechend unterteilte.

 ![Formatierung](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/d/d8d16f70e837671b88629ef2bc1ea297c5a3e893.jpeg)

Mich würde interessieren, wie ich sowas realisieren könnte. Braucht man dazu ein Plugin oder kann man das auch mit etwas CSS hinbekommen? Zickzacklinien können ja bereits mit CSS3 realisiert werden - siehe z.B. hier: [Zick-Zack-Linien mit CSS3 | kulturbanause®](https://kulturbanause.de/blog/zick-zack-linien-mit-css3/)

Kann man in die Produktebeschreibung überhaupt css code integrieren?

---

<div class="post-metadata">

**Author:** ![Mercator](https://avatars.discourse-cdn.com/v4/letter/m/e95f7d/32.png) [@Mercator](https://forum.shopware.com/u/Mercator)\
**Post date:** [10. Juli 2021 um 10:49 UTC](https://forum.shopware.com/t/produktetext-ansprechender-formatieren/89044/2 "2021-07-10T10:49:16Z")

</div>

Ich habe mir soeben mal das Plugin " CSS/JS Container" installiert und dort einen Cointainer mit folgendem Inhalt erstellt:

#demo {  
width: 100%;  
height: 150px;  
position: relative;  
background: #f5eff2  
}

#demo::before {  
content: ‚‘;  
position: absolute;  
bottom: -30px;  
left: 0;  
right: 0;  
height: 60px;  
background-size: 24px 48px;  
background-repeat: repeat-x;  
background-image: -webkit-linear-gradient(45deg, transparent 34%, #f5eff2 34%, #f5eff2 66%, transparent 66%), -webkit-linear-gradient(315deg, transparent 34%, #f5eff2 34%, #f5eff2 66%, transparent 66%);  
background-image: -moz-linear-gradient(45deg, transparent 34%, #f5eff2 34%, #f5eff2 66%, transparent 66%), -moz-linear-gradient(315deg, transparent 34%, #045B76 34%, #f5eff2 66%, transparent 66%);  
background-image: linear-gradient(45deg, transparent 34%, #f5eff2 34%, #f5eff2 66%, transparent 66%), linear-gradient(315deg, transparent 34%, #f5eff2 34%, #f5eff2 66%, transparent 66%);  
}

In der Produktebeschreibung kann ich in der Codeansicht das ganze nun über die DIVs #demo bzw. #demo::before steuern. Es klappt, ist allerdings sehr aufwändig, dies bei jedem einzelnen Artikel einzubauen. Hat jemand eine Idee wie man das einfacher handhaben könnte?