Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo zusammen,
ich verwsuche seit ein paar Tagen verzweifelt meine Startseite in Blocksatz zu formatieren.
Bin absoluter Anfänger also seht mir, falls ich was offensichtliches übersehen habe bitte nach. Habe hier im Forum schon gesucht und bin auf die Codes für den CSS Editor gestoßen, was leider nicht funktioniert.
Freue mich über jeden Tipp & Hilfe.
Gruß Max
Gelöst! Zur Lösung
Erfolg.
Hey @hrrmllr
Der CSS Editor übernimmt das Justify_Text
CSS entweder auf Abschnittsebene oder auf gesamt Shop-Ebene wie folgt aus meinem Testshop abgebildet:
Dann kannst du den CSS-Code auch etwas anpassen um den Blocksatz global
zu definieren:
body, p, li {
text-align: justify;
text-justify: inter-word;
}
Dieser Code wendet Blocksatz auf alle Textkörper (body
), Absätze (p
) und Listenelemente (li
) an, was typische Elemente sind, die Text enthalten. Wenn du bestimmte Bereiche ausschließen oder nur spezifische Abschnitte in Blocksatz formatieren möchtest, musst du möglicherweise spezifischere CSS-Selektoren verwenden. Zum Beispiel:
.specific-class p {
text-align: justify;
text-justify: inter-word;
}
Ersetze .specific-class
mit der tatsächlichen Klasse oder ID der Elemente, die du anpassen möchtest. Wenn du auf Probleme stößt oder unsicher bist, kann es hilfreich sein, einen Webentwickler zu konsultieren und um Hilfe zu bitten.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
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
Hey Max! @hrrmllr
Nicht verzweifeln - das schaffen wir! Und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren.
Probier den CSS hier in deinem CSS Editor Kästchen auf Abschnittsebene und checke wie es auf Mobile auch aussieht:
.collection__description p {
text-align: justify;
text-justify: inter-word;
}
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
Vielen Dank für deine Hilfe @Gabe , hat super funktioniert!nochmal der Voschaulink,
kann man den Blocksatz auch für den gesamten Shop übernehmen?
Erfolg.
Hey @hrrmllr
Der CSS Editor übernimmt das Justify_Text
CSS entweder auf Abschnittsebene oder auf gesamt Shop-Ebene wie folgt aus meinem Testshop abgebildet:
Dann kannst du den CSS-Code auch etwas anpassen um den Blocksatz global
zu definieren:
body, p, li {
text-align: justify;
text-justify: inter-word;
}
Dieser Code wendet Blocksatz auf alle Textkörper (body
), Absätze (p
) und Listenelemente (li
) an, was typische Elemente sind, die Text enthalten. Wenn du bestimmte Bereiche ausschließen oder nur spezifische Abschnitte in Blocksatz formatieren möchtest, musst du möglicherweise spezifischere CSS-Selektoren verwenden. Zum Beispiel:
.specific-class p {
text-align: justify;
text-justify: inter-word;
}
Ersetze .specific-class
mit der tatsächlichen Klasse oder ID der Elemente, die du anpassen möchtest. Wenn du auf Probleme stößt oder unsicher bist, kann es hilfreich sein, einen Webentwickler zu konsultieren und um Hilfe zu bitten.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
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
Danke dir @Gabe das mit .specific-class hat sehr gut funktioniert. hier nochmal ein Vorschaulink.
Ich würde gerne auf der Startseite im Bildbanner den Text in eine Reihe (oder in zwei gleich breite) Formatieren und die Schriftgröße etwas größer machen. (Bild 2) im Bild 1 würde ich gerne die Distanz zwischen den beiden Schaltflächen erhöhen. Könntest du mir dabei noch weiterhelfen?
Hey @hrrmllr
Um den Text im Banner auf zwei Zeilen zu verteilen, kannst du den Text innerhalb von <p>
-Tags platzieren und mit CSS entsprechend anpassen. Grundsätzlich könntest du den Text so aufteilen:
<div class="banner__text rte caption-with-letter-spacing">
<p>We have sorted our coffees according to their character</p>
<p>and how they express themselves.</p>
</div>
Um die Schriftgröße zu vergrößern, kannst du CSS verwenden, um die Schriftgröße des <p>
-Tags innerhalb des banner__text
-Containers anzupassen. Hier ist ein Beispiel:
.banner__text p {
font-size: 18px; /* oder eine andere Größe, die zu deinem Design passt */
}
Um den Abstand zwischen den Schaltflächen zu erhöhen, kannst du die CSS-Eigenschaft margin
verwenden. Beispiel:
.rich-text__buttons a {
margin-right: 20px; /* Erhöht den Abstand zwischen den Schaltflächen */
}
Hoffe das hilft dir weiter - bei weitere Fragen dazu kann ich gerne einen Programmierer empfehlen! 😉
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