Liquid, JavaScript, Themes
Guten Tag zusammen,
wir haben bei uns im Shop (www.hair0ne.com) folgendes Problem:
Wenn man einen Artikel im Einkaufswagen hat, öffnet sich der Einkaufswagen rechts und unten wird dann ein Upsell-Produkt angezeigt. Genau hier haben das Problem: Der Preis von dem Upsell-Produkt wird mit einem Minus-Zeichen davor angezeigt, was für Verwirrung sorgen könnte und auch allgemein unschön aussieht. Leider kann man hier keine Bilder anhängen, deshalb habe ich eins hier hochgeladen, Bilder sagen ja mehr als 1000 Worte. 🙂
Ich kriege mit meinen sehr begrenztem Webdesign-Wissen das Problem leider nicht gelöst. 😞
Vielleicht finden sich ja hier Experten, die uns weiterhelfen können!
Vielen Dank im Voraus und freundliche Grüße,
Sebastian Gerold von hairOne
Gelöst! Zur Lösung
Erfolg.
Hey @hairOne
Danke für die Angaben und den Link und ein tolles Shop! Hut ab! 😉
Apropos, du solltest Bilder hier anhängen können wenn du den folgenden Button verwendest:
Ich habe das aber jetzt angeschaut und von hier aus wird es schwierig sein das zu fixen und somit empfehle ich einen Entwickler oder Experten der/die in euer Code reingehen kann und das besser analysieren.
Ich habe die genaue Stelle in der Developer Console finden können und es handelt sich um das folgende Page Element:
<span class="product-upsell__btn-progress">
<svg height="18" width="18" class="svg-loader">
<circle r="7" cx="9" cy="9"></circle>
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9"></circle>
</svg>
</span>
Hmmm, du könntest versuchen den HTML code zu aendern wo dieser Bindestrich sich befindet innerhalb des <span class="product-upsell__btn-price">
element. Entferne den Bindestrich und die umgebenden nicht trennenden Leerzeichen (
) wie folgt:
Ersetze beispielsweise :
<span class="product-upsell__btn-price"> - <span class="money">€12.99 EUR</span></span>
Mit:
<span class="product-upsell__btn-price"><span class="money">€12.99 EUR</span></span>
Dann wird hoffentlich der Strich vor dem Upsell-Produktpreis aus dem Einkaufswagen entfernt werden.
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 @hairOne
Danke für die Angaben und den Link und ein tolles Shop! Hut ab! 😉
Apropos, du solltest Bilder hier anhängen können wenn du den folgenden Button verwendest:
Ich habe das aber jetzt angeschaut und von hier aus wird es schwierig sein das zu fixen und somit empfehle ich einen Entwickler oder Experten der/die in euer Code reingehen kann und das besser analysieren.
Ich habe die genaue Stelle in der Developer Console finden können und es handelt sich um das folgende Page Element:
<span class="product-upsell__btn-progress">
<svg height="18" width="18" class="svg-loader">
<circle r="7" cx="9" cy="9"></circle>
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9"></circle>
</svg>
</span>
Hmmm, du könntest versuchen den HTML code zu aendern wo dieser Bindestrich sich befindet innerhalb des <span class="product-upsell__btn-price">
element. Entferne den Bindestrich und die umgebenden nicht trennenden Leerzeichen (
) wie folgt:
Ersetze beispielsweise :
<span class="product-upsell__btn-price"> - <span class="money">€12.99 EUR</span></span>
Mit:
<span class="product-upsell__btn-price"><span class="money">€12.99 EUR</span></span>
Dann wird hoffentlich der Strich vor dem Upsell-Produktpreis aus dem Einkaufswagen entfernt werden.
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,
erstmal vielen Dank für deine Antwort.
Ah, da hab ich den Wald wohl vor lauter Bäumen nicht gesehen, ich habe nur die Meldung mit Anhang unten gesehen. Danke für den Tipp zum Bilder-Upload! 🙂
Deine Lösung hat an sich erstmal geklappt, bei Google Chrome mit Rechtsklick -> Untersuchen kann man ja temporär den Code ändern, damit habe ich das Minus wegbekommen.
Allerdings weiß ich nicht, wie ich an diesen Code bei uns im Theme komme, kannst Du mir hierbei auch noch helfen? Ich sehe hier nur *.css-Dateien und *.liquid-Dateien, hier steht aber leider nicht der entsprechende Code.
Viele Grüße und nochmals schonmal vielen, lieben Dank für Deine Hilfe! 🙂
Habe es nun, wo ich heute etwas mehr Zeit hatte, mich dem Problem zu widmen, selber gefunden. Nochmals vielen Dank für deine Hilfe @Gabe ! 🙂
Viele Grüße,
Sebastian
hairOne
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