A Shopify store owner seeks help creating custom gray background containers/boxes in product descriptions and making the description section open by default on product pages.
Main Issue:
Solution Provided:
A community helper offers HTML/CSS code examples:
.info-box class with gray background (#f2f2f2), padding, and marginsbase.css file in Assets folder<div> elements to be inserted in product-template.liquid<details open> HTML attributeKey Challenge:
The original poster has limited HTML/CSS experience and needs clarification on:
Status: Helper requests preview link to provide theme-specific guidance. Discussion remains open with user seeking more detailed implementation instructions for their particular setup.
Hallo Leute,
seit langem suche ich eine Möglichkeit diese Felder hier wie hier auf dem Foto selbst zu erstellen.
Weiß jemand wie man die grau markierten Kästen/Container mit der Hintergrundfarbe auf seine Produktseite in die Produktbeschreibung bekommt ?
Und falls es jemand weiß, wie man die erste Produktbeschreibung beim öffnen der Produktseite schon geöffnet ist wie auf dem Bild unter “Beschreibung” (blau markiert)
zu sehen?
Wäre für eine hilfreiche Antwort wirklich Dankbar.
Hey @Limanko_77
Da du sehr viele Fragen bzgl. Änderungen zu deinem Theme hier gestellt hast, ist mein erster Eindruck, dass du nicht sehr zufrieden mit deinem Gratis Dawn Theme bist. Frage dazu: hast du auch andere Themes zum Shop hinzugefügt, die ggf. besser für deine Zwecke, deine Produkte, dein Branding, und Zielpublikum geeignet sind? Wir haben auch tolle Premium Themes die das ganze einfach viel besser können, und gerne kann ich zu deinem Shop Tipps für bessere Themes abgeben.
Um graue Boxen oder Container wie auf dem Foto für deine Produktbeschreibung zu erstellen, kannst du HTML und CSS verwenden, um benutzerdefinierte Styles innerhalb deiner Produktbeschreibungstemplate in Shopify hinzuzufügen. Hier ein Beispiel, wie du es umsetzen könntest:
## BESCHREIBUNG
.custom-container {
background-color: #f4f4f4; /* Grauer Hintergrund */
padding: 20px; /* Innenabstand */
margin: 20px 0; /* Außenabstand oben und unten */
border: 1px solid #ddd; /* Grauer Rand */
}
Für das standardmäßige Öffnen der Produktbeschreibung, wenn die Seite geladen wird, hängt die Lösung von der spezifischen Implementierung der “Accordion” oder “Toggle”-Funktion in deinem Theme ab. Oft wird dies mit JavaScript oder einer Theme-spezifischen Option realisiert. Hier ist ein generisches Beispiel für Javascript:
document.addEventListener('DOMContentLoaded', function() {
// Öffnet den Container, der die Beschreibung enthält
var descriptionContainer = document.querySelector('.description-container');
descriptionContainer.style.display = 'block'; // oder andere Logik, um das Accordion zu öffnen
});
Ersetze .description-container durch die Klasse oder ID des Elements, das die Beschreibung enthält.
Um solche grau hinterlegten Info-Boxen auf deiner Shopify-Produktseite zu erstellen, kannst du HTML und CSS verwenden. Hier ist ein Beispiel, wie du den HTML- und CSS-Code schreiben könntest, um diese Boxen zu gestalten:
Bezahlen Sie mit Klarna in 3 Raten zu je €12,00.
Übernimmt alle Einfuhrsteuern und Zölle
Kostenloser Versand über €60
Kostenlose DE Rücksendungen
.info-box {
background-color: #f2f2f2; /* Hintergrundfarbe der Box */
border: 1px solid #dcdcdc; /* Randfarbe */
padding: 20px; /* Innenabstand */
margin-bottom: 20px; /* Außenabstand nach unten */
}
Dieser Code erstellt Boxen mit einer grauen Hintergrundfarbe und einem Rand, mit Innen- und Außenabständen.
Um sicherzustellen, dass die Beschreibung beim Laden der Seite geöffnet ist, könntest du ein JavaScript-Script verwenden, das automatisch die Funktion zum Erweitern der Beschreibung aufruft. Wenn deine Akkordeon- oder Kollapsible-Elemente bereits eine Klasse oder ID haben, die für die Darstellung des geöffneten Zustandes verwendet wird, könntest du diese Klassen oder IDs beim Laden der Seite hinzufügen. Wenn du ein Framework wie Bootstrap verwendest, folge den Anweisungen des Frameworks, um Akkordeons standardmäßig zu öffnen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hallo Gabe,
Vielen Dank für die schnellen Antworten und Anmerkung zu weiteren premium Themes. Aktuell bleibe ich noch beim Dawn Theme da es mein erster Onlineshop wird und ich nicht mehr allzu große Änderung vorhabe, aber in Zukunft werde ich mich bestimmt nochmal umschauen.
Nun zu deinen hilfreichen Antworten. Leider bin ich noch nicht all zu tief drinne was die Codesprache HTML und CSS betrifft. Kannst du mir bitte nur etwas genauer erklären:
in welchen Datein ich diese Codes und zwischen welchen Codes platzieren soll
und was genau du mit "
Ersetze .description-container durch die Klasse oder ID des Elements, das die Beschreibung enthält. " meinst.
Also was könnten die Klassen oder IDS sein, wie sehen diese Codes aus um .description-container mit denen zu ersetzen ?
Ich freue mich auf deine Antwort.
Hey @Limanko_77
Das kann ich dir genau sagen wenn du hier einen befristeten Vorschaulink oder Link zu deinen Shop postest, denn die Klassen oder ID der verschiedene Liquid Elemente muss ich zuerst analysieren können. Der Vorschaulink läuft nach 24 Std. ab. Ich bin noch bis zum Nachmittag im Office, ansonsten nächste Woche.
VG,
Hey @Limanko_77
Danke für den Link aber das obige Bild scheint nicht in deinem Shop auffindbar zu sein. Alles PDPs sehen wie folgt aus und ein “Grau” kann ich nirgendswo finden:
Außerdem ist das in deinem Bild eher eine externe Anbindung im Code, da es mit einer externen Klarna Zahlung zu tun hat. Daher wird wahrscheinlich der graue Hintergrund mit importiert.
Um die grau markierten Kästen/Container mit der Hintergrundfarbe auf deiner Produktseite in die Produktbeschreibung zu bekommen, kannst du folgende Schritte befolgen:
div-Elemente) für deine Inhalte, die du in Kästen einbetten möchtest.div-Elementen eine Hintergrundfarbe und andere gewünschte Stile zuzuweisen.div-Elemente an der richtigen Stelle in deinem HTML-Code.Für das Öffnen der Produktbeschreibung, wie auf dem Bild unter “Beschreibung” zu sehen, verwendest du das HTML-Element details mit dem Attribut open. Das bewirkt, dass die Beschreibung automatisch aufgeklappt ist, wenn die Seite geladen wird.
Hier ein einfaches Beispiel, wie du deinen Code anpassen könntest:
Füge dieses CSS und HTML an die entsprechenden Stellen in deinem Shopify-Theme ein. Du kannst das Aussehen und Verhalten weiter anpassen, indem du spezifische Klassen oder IDs deiner Elemente im CSS ansprichst und mit zusätzlichen Stilen versiehst.
Beachte bitte, dass die spezifischen IDs oder Klassen, die in deinem Theme verwendet werden, von den obigen Beispielen abweichen können. Du musst also möglicherweise den genauen Klassennamen anpassen, um sie mit deinem Theme übereinstimmen zu lassen.
Hoffe das hilft dir weiter - lass wissen falls nicht!
Danke für die Antworten.
Kannst du mir nur noch sagen in welche Datein welcher Code reinkommt?
Vielen Dank.
Hey @Limanko_77
Viel CSS kannst du hier einpflegen und testen. Gehe zu Online Store > Themes > Actions > Edit code und suche dann in den “Assets” nach base.css. Füge den folgenden CSS-Code am Ende der Datei hinzu:
.info-box {
background-color: #f2f2f2; /* Graue Hintergrundfarbe */
padding: 20px; /* Innenabstand */
margin-bottom: 20px; /* Abstand nach unten zu anderen Elementen */
/* Füge hier weitere gewünschte Stile hinzu */
}
Der HTML-Code für deine individuellen Kästen muss in die Liquid-Datei eingefügt werden, die den Bereich der Seite repräsentiert, wo die Kästen erscheinen sollen. Das könnte product-template.liquid, page.liquid oder eine ähnliche Datei innerhalb des Ordners “Sections” oder “Templates” sein.
Beispiel: Wenn du die Kästen auf der Produktseite hinzufügen möchtest, suche nach product-template.liquid unter “Sections”. Füge an der gewünschten Stelle in der Datei den folgenden HTML-Code ein:
Falls du die Produktbeschreibung (wie in deinem Beispiel oben) standardmäßig erweitern möchtest, solltest du nach der entsprechenden details-Tag-Struktur in der product-template.liquid oder einer ähnlichen Datei suchen und sicherstellen, dass das open-Attribut im details-Tag enthalten ist.
Beispiel: Suchen und Öffnen von product-template.liquid, dann:
Dir noch ein schönes W-Ende!