Liquid, JavaScript, Themes
Hallo zusammen,
ich würde gerne einstellen, dass wenn der Kunde ein Artikel in den Warenkorb hinzufügt, dass dann sowas im warenkorb steht, wie "Gute Wahl".
Ich hab gesehen, dass so eine ähnliche Frage schon mal gestellt worden ist, aber auf ein anderes Theme bezogen.
Ich hab das Theme Dawn.
Ich würde mich sehr freuen, wenn mir jemand hierbei helfen könnte.
Viele Grüße
Luca
Gelöst! Zur Lösung
Erfolg.
Hey @Luca31
Danke für die Frage und es gibt ein paar Stellen, wo du das machen kannst. An erster Stelle verwendet Dawn ja einen ausklappbaren AJAX Cart und in diesem gibt es eine Stelle in deinen standard Theme Texten.
Dasselbe wie im Video kannst du auch mit weiteren Headings deiner Cart Page in den standard Theme Texte machen, wie hier abgebildet:
Wenn du es aber im Code DIY machen möchtest:
Wenn du es selber auf deiner Cartseite 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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um eine benutzerdefinierte Nachricht wie "Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen" im Warenkorb oberhalb der Artikelübersicht in deinem Dawn Theme einzufügen, kannst du einen Code wie den folgenden als Grundlage verwenden und ihn an die entsprechende Stelle in deiner cart-template.liquid
-Datei einfügen:
<div class="cart-header">
<h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
<!-- Benutzerdefinierte Nachricht hier einfügen -->
<div class="cart-message">
<p>Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen.</p>
</div>
<a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
{{ 'cart.general.continue_shopping' | t }}
</a>
</div>
Und füge dann einen CSS wie diesen in deinen Theme-CSS-Editor ein, um das Aussehen anzupassen:
<style>
.cart-message {
text-align: center;
background-color: #ff0; /* Hintergrundfarbe nach Wahl */
color: #333; /* Textfarbe nach Wahl */
padding: 10px;
margin-top: 20px; /* Oder passender Abstand nach oben */
border-radius: 5px; /* Optional: für abgerundete Ecken */
}
</style>
Oder:
<div class="cart__header">
<!-- Benutzerdefinierte Nachricht hier einfügen -->
<div class="cart-message">
<p>Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen.</p>
</div>
<!-- Rest des vorhandenen Codes behalten -->
...
</div>
Und CSS:
<style>
.cart-message {
text-align: center;
background-color: #ff0; /* Hintergrundfarbe nach Wahl */
color: #333; /* Textfarbe nach Wahl */
padding: 10px;
margin-bottom: 20px; /* Abstand nach unten zum nächsten Element */
border-radius: 5px; /* Optional: für abgerundete Ecken */
}
</style>
Usw...
Achte darauf, den Code an der richtigen Stelle in deinem Template einzufügen, also oberhalb der Artikelauflistung und innerhalb des cart__header
-Bereichs, wenn einer vorhanden ist. Du solltest auch sicherstellen, dass das Styling mit dem Design deines Shops übereinstimmt. Teste die Änderungen immer in einer Vorschau und mache sicherheitshalber ein Backup deines Themes, bevor du Änderungen vornimmst. Wenn du nicht vertraut mit der Bearbeitung von Shopify-Themes bist, könnte es ratsam sein, die Hilfe eines professionellen Entwicklers in Anspruch zu nehmen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!
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
Erfolg.
Hey @Luca31
Danke für die Frage und es gibt ein paar Stellen, wo du das machen kannst. An erster Stelle verwendet Dawn ja einen ausklappbaren AJAX Cart und in diesem gibt es eine Stelle in deinen standard Theme Texten.
Dasselbe wie im Video kannst du auch mit weiteren Headings deiner Cart Page in den standard Theme Texte machen, wie hier abgebildet:
Wenn du es aber im Code DIY machen möchtest:
Wenn du es selber auf deiner Cartseite 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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um eine benutzerdefinierte Nachricht wie "Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen" im Warenkorb oberhalb der Artikelübersicht in deinem Dawn Theme einzufügen, kannst du einen Code wie den folgenden als Grundlage verwenden und ihn an die entsprechende Stelle in deiner cart-template.liquid
-Datei einfügen:
<div class="cart-header">
<h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
<!-- Benutzerdefinierte Nachricht hier einfügen -->
<div class="cart-message">
<p>Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen.</p>
</div>
<a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
{{ 'cart.general.continue_shopping' | t }}
</a>
</div>
Und füge dann einen CSS wie diesen in deinen Theme-CSS-Editor ein, um das Aussehen anzupassen:
<style>
.cart-message {
text-align: center;
background-color: #ff0; /* Hintergrundfarbe nach Wahl */
color: #333; /* Textfarbe nach Wahl */
padding: 10px;
margin-top: 20px; /* Oder passender Abstand nach oben */
border-radius: 5px; /* Optional: für abgerundete Ecken */
}
</style>
Oder:
<div class="cart__header">
<!-- Benutzerdefinierte Nachricht hier einfügen -->
<div class="cart-message">
<p>Gute Wahl, aber der Bestellprozess ist noch nicht abgeschlossen.</p>
</div>
<!-- Rest des vorhandenen Codes behalten -->
...
</div>
Und CSS:
<style>
.cart-message {
text-align: center;
background-color: #ff0; /* Hintergrundfarbe nach Wahl */
color: #333; /* Textfarbe nach Wahl */
padding: 10px;
margin-bottom: 20px; /* Abstand nach unten zum nächsten Element */
border-radius: 5px; /* Optional: für abgerundete Ecken */
}
</style>
Usw...
Achte darauf, den Code an der richtigen Stelle in deinem Template einzufügen, also oberhalb der Artikelauflistung und innerhalb des cart__header
-Bereichs, wenn einer vorhanden ist. Du solltest auch sicherstellen, dass das Styling mit dem Design deines Shops übereinstimmt. Teste die Änderungen immer in einer Vorschau und mache sicherheitshalber ein Backup deines Themes, bevor du Änderungen vornimmst. Wenn du nicht vertraut mit der Bearbeitung von Shopify-Themes bist, könnte es ratsam sein, die Hilfe eines professionellen Entwicklers in Anspruch zu nehmen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!
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,
Vielen Dank für die ausführliche Antwort!
Ich glaub ich habe noch nie so eine ausführliche und gute Lösung bekommen!
Schönen Abend
Luca
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