Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo zusammen,
ich habe unter Benutzerdefinierte Daten -> Produkte ein Metafeld angelegt, welches im Produkt unterhalb des Bildes angezeigt wird. (Um zusätzlichen Produkttext zu erstellen). Dieses Metafeld hat aber nur eine bestimmte Breite und füllt nicht die gesamte Breite des übergeordneten "Rich Text Feldes" aus. Kann ich irgendwie einstellen, dass das Feld die gesamte Breite ausfüllt?
Hier ein Screenshot zum besseren Verständnis:
Hey @LaserPlus
Kann es sein dass der Text bzw. die Textzeilen mit <br>
Tags, sprich, Zeilenumbrüche verkürzt wird/werden (siehe Code unten)? Hast du den Text beispielsweise von einer externen Quelle 1:1 da per copy & paste eingefügt? Falls ja hast du auch die Formatierung ggf. mit eingefügt.
Wenn nicht, um sicherzustellen, dass das Metafeld die gesamte Breite des übergeordneten "Rich Text Feldes" ausfüllt, kannst du CSS verwenden. Hier sind einige Schritte, die du unternehmen kannst, um dies zu erreichen. Du kannst dem div
, das das Metafeld enthält, eine spezielle CSS-Klasse hinzufügen, die die Breite auf 100% setzt.
Füge eine Klasse, wie full-width
, zu deinem Metafeld-Container hinzu:
<div class="rich-text__wrapper rich-text__wrapper--left page-width">
<div class="rich-text__blocks left">
<div class="rich-text__text rte scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
<div class="metafield-rich_text_field full-width">
<p>Schnell, einfach und professionell kommunizieren – das Avery Zweckform <br>
Formularbuch 1020 Kurzbrief macht es möglich! Mit diesem praktischen <br>
Formularbuch können Sie Ihre Kurzbriefe im Handumdrehen erstellen. Dank <br>
der vorgedruckten Felder für Absender, Empfänger, Betreff und Text <br>
sparen Sie Zeit und können sich auf das Wesentliche konzentrieren. Die <br>
hochwertigen Avery Zweckform Formulare garantieren zudem eine saubere <br>
und professionelle Optik. Ob im Büro oder unterwegs – dieses <br>
Formularbuch ist der ideale Begleiter für alle Ihre geschäftlichen <br>
Korrespondenzen. Überzeugen Sie sich selbst von der Qualität und <br>
Effizienz des Avery Zweckform Formularbuchs 1020 Kurzbrief!</p>
</div>
</div>
</div>
</div>
Füge diesen CSS-Code zu den Theme-Einstellungen hinzu:
.full-width {
width: 100%;
}
Dieser CSS-Code stellt sicher, dass das div
mit der Klasse full-width
die gesamte verfügbare Breite des übergeordneten Containers einnimmt. Überprüfe auch die Darstellung deiner Seite und stelle sicher, dass das Metafeld nun die gesamte Breite ausfüllt. Falls nicht, kann es sein, dass andere CSS-Regeln die Breite beeinflussen. Du kannst den CSS-Code weiter anpassen, um sicherzustellen, dass alle Container die gewünschte Breite einnehmen:
.rich-text__wrapper .full-width {
width: 100%;
}
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.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo Gabe,
klingt soweit gut und logisch. Wo kann ich dem Metafeld-Container denn die Klasse zufügen? Wird das im "Code" gemacht? Falls ja, welche Datei würde dafür in Frage kommen?
Oder kann ich das noch an anderer Stelle machen?
Gruß
Marco
Hey @LaserPlus
Folge einfach meinen verlinkten Help Doc oben - der sollte dir weiterhelfen!
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024