Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo, ich nutze DAWN und habe folgendes Problem. Ich habe ein Produkt wo ich mehrere Anzahle als Varianten anbieten im Paket, wo der Preis dann rabattiert wird, wenn man z.B. 3er Pack wählt (Siehe Bild 1). Das funktioniert soweit auch super und soll so bleiben. Nun möchte ich das in dem Abschnitt "Vorgestellte Kollektion, wo dieses Produkt drin ist, das dort NICHT der Vergleichspreis angezeigt wird, sondern NUR Ab 29,99 EUR ohne dem davor durchgestrichenen Preis. (siehe Bild 2).
Ich hatte bereits im Code in der price.liquid Datei ein entsprechenden <div>-Container auskommentiert. Nur waren dann im gesamten Shop überall der durchgestrichene Vergleichspreis weg, und der soll ja beim Produkt selbst bleiben. Weiß jemand, was ich da machen kann? Vielen Dank im Voraus.
Bild 2 Bild 1
Gelöst! Zur Lösung
Erfolg.
Hey @MrMoning
Danke für den Sachverhalt und mein erstes Anliegen ist dass du die Packs als Varianten anbietest mit der Option 1er Pack, 3er Pack usw. Das ist nicht die beste Practice denn wie kannst da damit den Bestand korrekt im Backend verfolgen können, wenn ein 3er Pack als Variante des Parent Product ist?
Außerdem ist mit dieser Einrichtung der Packs als Variantenoptionen, das erwartete Systemverhalten so dass der Sale Price der im Featured Collection Section oder auf der Kollektionsseite angezeigt wird, der von der billigsten Variante ist.
Lösung im CSS Editor
Du musst auch bedenken, dass alle Code Anpassungen ggf. einen Dominoeffekt auf anderen Bereiche des HTML Dom-Trees haben können. Und ja, du hast den durchgestrichenen Vergleichspreis auf Shop-Ebene auskommentiert, nicht auf Section-Ebene, in der price.liquid Datei und den entsprechenden <div>-Container. Somit kannst du etwas CSS zum Shop hinzufügen ohne dein Dawn Theme aus den Theme Updates auszuschließen.
Hier ein CSS der das machen kann:
/* CSS-Datei */
/* Nur Preise in der Produktkarte innerhalb der 'Vorgestellten Kollektion' ausblenden */
#Slider-template--22571138056541__featured_collection .price__sale s {
display: none;
}
Dieser Selektor zielt gezielt auf die durchgestrichenen Preise (<s>
-Tag) innerhalb der Preise in der "Vorgestellten Kollektion". Stelle sicher, dass die ID (#Slider-template--22571138056541__featured_collection
) mit der ID im HTML-Code übereinstimmt.
JavaScript-Lösung: Wenn CSS allein nicht ausreicht, könnte eine JavaScript-Lösung helfen. Du könntest JavaScript-Code hinzufügen, um gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" zu entfernen. Füge den folgenden JavaScript-Code hinzu:
document.addEventListener('DOMContentLoaded', function () {
const featuredCollection = document.querySelector('#Slider-template--22571138056541__featured_collection');
if (featuredCollection) {
const salePrices = featuredCollection.querySelectorAll('.price__sale s');
salePrices.forEach(price => price.style.display = 'none');
}
});
Dieser Code wird ausgeführt, sobald die Seite geladen ist, und blendet gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" aus.
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
Erfolg.
Hey @MrMoning
Danke für den Sachverhalt und mein erstes Anliegen ist dass du die Packs als Varianten anbietest mit der Option 1er Pack, 3er Pack usw. Das ist nicht die beste Practice denn wie kannst da damit den Bestand korrekt im Backend verfolgen können, wenn ein 3er Pack als Variante des Parent Product ist?
Außerdem ist mit dieser Einrichtung der Packs als Variantenoptionen, das erwartete Systemverhalten so dass der Sale Price der im Featured Collection Section oder auf der Kollektionsseite angezeigt wird, der von der billigsten Variante ist.
Lösung im CSS Editor
Du musst auch bedenken, dass alle Code Anpassungen ggf. einen Dominoeffekt auf anderen Bereiche des HTML Dom-Trees haben können. Und ja, du hast den durchgestrichenen Vergleichspreis auf Shop-Ebene auskommentiert, nicht auf Section-Ebene, in der price.liquid Datei und den entsprechenden <div>-Container. Somit kannst du etwas CSS zum Shop hinzufügen ohne dein Dawn Theme aus den Theme Updates auszuschließen.
Hier ein CSS der das machen kann:
/* CSS-Datei */
/* Nur Preise in der Produktkarte innerhalb der 'Vorgestellten Kollektion' ausblenden */
#Slider-template--22571138056541__featured_collection .price__sale s {
display: none;
}
Dieser Selektor zielt gezielt auf die durchgestrichenen Preise (<s>
-Tag) innerhalb der Preise in der "Vorgestellten Kollektion". Stelle sicher, dass die ID (#Slider-template--22571138056541__featured_collection
) mit der ID im HTML-Code übereinstimmt.
JavaScript-Lösung: Wenn CSS allein nicht ausreicht, könnte eine JavaScript-Lösung helfen. Du könntest JavaScript-Code hinzufügen, um gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" zu entfernen. Füge den folgenden JavaScript-Code hinzu:
document.addEventListener('DOMContentLoaded', function () {
const featuredCollection = document.querySelector('#Slider-template--22571138056541__featured_collection');
if (featuredCollection) {
const salePrices = featuredCollection.querySelectorAll('.price__sale s');
salePrices.forEach(price => price.style.display = 'none');
}
});
Dieser Code wird ausgeführt, sobald die Seite geladen ist, und blendet gezielt die durchgestrichenen Preise in der "Vorgestellten Kollektion" aus.
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
Super vielen Dank für die schnelle Antwort. Nur eine Frage dazu, wo genau finde ich die ID im HTML Code, die für die Kollektion ist?
Gerne geschehen und hast du den Code im CSS Editor ausprobiert?
Die ID findest du über deine Chrome Developer Console. Siehe meinen Blog dazu hier.
Hoffe das hilft dir weiter! 😉
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
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