Inhalts-Container Einstellung seperat geben

[Andrej1701]

Hallo zusammen,

Ich mache gerade meinen 1. Online Shop bei Shopify (benutze das Theme Refresh) und würde gerne paar Schatten bei meinen Inhalt-Containiern einstellen.

Nämlich habe ich ca. 80% meiner Inhalt-Container (Rich Text, Mehrere Spalten,Bild mit Text etc.), denen ich einen Schatten geben will und 20% meiner Inhalt-Container (nur Rich Texte) denen ich keinen Schatten geben möchte.

Jedoch werden bei der Einstellung alle Inhalt-Container mit der Einstellung verändert und ich finde keine Möglichkeit seperat die Container auszuwählen denen ich den Schatten geben will.

Gibt es so eine Möglichkeit überhaupt?

Mfg

[Gabe · Accepted solution]

Hey @Andrej1701 

Hier handelt es sich um Theme Vorlagen die du dafür verwenden müsstest um individuelle Inhalte anzuzeigen und nicht dieselben Inhalte über alle Seiten. Siehe unsere Anleitung dazu hier.

Es ist auch möglich, individuellen Inhalt-Containern einen Schatten hinzuzufügen, indem man benutzerdefinierte CSS-Klassen verwendet und das Theme-Stylesheet anpasst. Gehe in den Theme -> "Aktionen" -> "Duplizieren" um eine Testumgebung zu erstellen und dann auf "Code bearbeiten". Navigiere zum "theme/base.css" (abhängig vom Theme) im "Assets"-Ordner im linken Menü. Füge am Ende der Datei den folgenden CSS-Code hinzu:

.custom-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Du kannst die Werte in box-shadow anpassen, um den gewünschten Schattenstil zu erhalten. Navigiere nun zu den betreffenden Inhalt-Containern (Rich Text, Mehrere Spalten, Bild mit Text usw.) und füge die benutzerdefinierte Klasse "custom-shadow" hinzu in der entsprechenden Seite oder den Abschnitt im Theme-Code (z. B. "index.liquid" oder ein Snippet). Suche den HTML-Code für den betreffenden Inhalt-Container und füge die Klasse "custom-shadow" zum Container-Element hinzu. Zum Beispiel:

<div class="content-container custom-shadow">
  <!-- Ihr Inhalt hier -->
</div>

Wiederhole das für alle Inhalt-Container, denen du den Schatten hinzufügen möchtest. Dadurch wird der Schatten nur den ausgewählten Inhalt-Containern hinzugefügt und die anderen unverändert gelassen. Beachte, dass die genaue Vorgehensweise je nach Theme und der Struktur Ihrer Seite variieren kann. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!