Liquid, JavaScript, Themes
Guten Abend!
ich benutze das Dawn Theme und würde gerne folgende Fragen stellen:
1. Wie kann ich die Produktbezeichnung im Produktkarussell sowohl auf der Startseite als auch auf den einzelnen Produktseiten bei "Das könnte dir auch gefallen" größer machen? Derzeit ist die Schrift zu klein und schwer zu lesen.
2. Wie kann ich den Hintergrund im Eingabefeld der Mengenangabe im Warenkorb in weiß ändern?
3. Wie kann ich im Footer die Social-Media-Icons größer machen?
Gibt es vielleicht dazu irgendwelche versteckten Optionen, die ich noch nicht kenne oder kann man dazu einen Code benutzen?
Viele Dank vorab für die Beantwortung!
Hey @GymNudge
Danke für die Fragen und es scheint mir ihr seid nicht ganz mit der Gestaltung und Erscheinung unseres Free Standard Themes Dawn zufrieden, ist das richtig?
Mein Frage dazu wäre ob ihr auch andere Themes zum Shop hinzugefügt habt die ggf. besser zu euren Shop, Produkte und Brand Identity passen? Es gibt ganz tolle Themes in unserem Theme Store (scrolle ganz runter im Bereich "Themes" im Admin) wo es bestimmt eins gibt, das besser zu euren Vorstellungen passt! 😉
Das sage ich weil, ihr entweder beim Dawn Theme bleiben könnt und viel Zeit und Geld in Anpassungen stecken, oder das ganze ersparen mit einem besseren Theme.
Wenn ihr aber doch die Anpassungen durchziehen wollt dann bitte immer in einer Themekopie/ Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell. Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ 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!
Um die Produktbezeichnung im Produktkarussell deines Dawn-Themes in Shopify zu vergrößern, kannst du einen CSS wie den folgenden zum Dawn Theme ergänzen (ohne Gewähr - bitte mit einem Programmierer machen!):
h1, .h1 {
font-size: calc(var(--font-heading-scale) * 3rem); // Du kannst 3rem durch die gewünschte Größe ersetzen
}
Um die Änderung des Hintergrunds im Eingabefeld der Mengenangabe im Warenkorb des Dawn Themes durchzuführen, verwenden einen CSS wie den folgenden:
.quantity-input .quantity {
background: #041E42; // Setze hier deine gewünschte Hintergrundfarbe
}
.quantity-input .quantity * {
color: white; // Setze hier deine gewünschte Schriftfarbe
}
Diese Anpassungen ändern den Hintergrund und die Schriftfarbe im Mengenauswahlfeld - die Farbwerte nach deinen Vorstellungen einfach anpassen.
Um die Größe der Social-Media-Icons im Footer des Dawn Themes von Shopify zu ändern, kannst du folgenden Ansatz verfolgen:
Zuerst musst du für jedes Social-Media-Icon eine spezifische Klasse im footer.liquid
und in den entsprechenden snippets/icon-xyz.liquid
Dateien (zum Beispiel icon-facebook.liquid
) hinzufügen. Zum Beispiel für Facebook könntest du die Klasse .social_icons__facebook
hinzufügen.
Danach fügst du den folgenden CSS-Code in die components-list-social.css
Datei ein:
.social_icons__facebook .icon {
height: 5rem !important;
width: 5rem !important;
}
Hierbei steht 5rem
für die Größe der Icons. Du kannst diesen Wert anpassen, um die Größe nach deinen Wünschen zu ändern.
Wenn du die allgemeine Größe aller Icons anpassen möchtest, kannst du den vorhandenen CSS-Code in der components-list-social.css
Datei ändern:
.list-social__item .icon {
height: 3.6rem; // Ändere diesen Wert, um die Größe aller Icons anzupassen
width: 3.6rem;
}
Durch diese Änderungen kannst du die Größe spezifischer Social-Media-Icons individuell anpassen und gleichzeitig die allgemeine Größe aller Icons beibehalten oder ändern.
Es wäre also ratsam, einen Shopify-Experten oder Entwickler zu konsultieren, um diese Anpassungen vorzunehmen, insbesondere wenn du nicht vertraut bist mit HTML/CSS.
---
Habt ihr auch den Shop auf die Weihnachtssaison und den Winterschlussverkauf umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 oder Schnäppchen 👀!
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
Hey Gabe,
herzlichen Dank für die ausführliche Beantwortung. Bezüglich der Frage zur Änderung der Schriftgröße und der Änderung der Hintergrundfarbe beim Feld der Mengenangabe würde ich noch wissen, in welcher CSS-Quelldatei jeweils die Codes eingefügt werden müssen? Könntest du das noch konkretisieren?
Viele Grüße!
Hey @GymNudge
Ich kann dir nur generelle Infos geben da ich keine Einsicht oder Zugang zu deinem Shop habe und das was du erreichen möchtest eine größere Implementierung verlangt (Kostenschätzung: von €1k bis €10k - there's no such thing as a free lunch 😉 ).
Du kannst ja mal 👀, ob unser Theme Team das uber dein 60-Min Design Time supported. Siehe unsere Anleitung dazu hier.
Wenn du es selber programmieren möchtest dann könntest du auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
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
Aber ich verstehe das jetzt nicht?? Du hast doch schon die Codes gegeben. Ich muss doch nur wissen, wo genau ich alles einfügen muss. Das kann ich doch selbst erledigen.
Hey @GymNudge
Ich müsste einen 👁️ in dein Code werfen was ja nicht von hier möglich ist. Nur weil ich einen Code vorgeschlagen habe...so einfach ist das nicht denn alle Themes sind anders aufgebaut und strukturiert. Ausserdem verlangt das viel Arbeit das eigentlich kostenpflichtig ist. Mein Code ist nur ein Vorschlag das du schon selber testen musst.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
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
Ich habe den Shop jetzt freigegeben. Unter www.gymnudge.de kannst du dir das anschauen.
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