Angebotspreis

[JanBaumg22]

Grüße euch,

ich habe folgendes Problem. Bei mir wird der Angebotspreis vor dem ursprünglichen Preis angezeigt. Mich stört das total und ich finde es sieht auch nicht schön aus. Kann man das irgendwo umstellen oder mit css umprogrammieren? Ich hätte gerne zuerst den ursprünglichen Preis durchgestrichen und dann den Angebotspreis

[Gabe]

Hey @JanBaumg22 

Danke für das Bild und hier gibt es ein paar Dinge zu beachten. Du möchtest also dass die Preise in deinem Shop statt als 24,95€ 39,95€ angezeigt werden -> als 39,95€ 24,95€ angezeigt werden da es so für dich als Shopinhaber intuitiver aussieht, ist das richtig?

• Mich stört das total und ich finde es sieht auch nicht schön aus...

Meine frage wäre, ob das auch so für die Besucher intuitiver aussehen würde? Tbh, für mich selber sieht die erste Variante besser aus und ich habe das Gefühl du hast das ganze vielleicht nicht aus der Sichtweise deiner Kunden angeschaut, kann das sein? Das ist einer der grossen UX Design Mistakes vieler Shopinhaber - das Shop so gestalten wie SIE es besser finden, anstatt das Shop so zu gestalten wie die USER es besser finden.

Man kann z. B. etwas A/B Split Testing mit dem Freundeskreis oder eine User-Testgruppe durchführen, um zu 👁️ welche Variante die höhere Conversion Rate auslöst.

Das sage ich weil der Unterschied eine Conversion rate von 1% in deinem Shop anstatt 3% sein kann (oder sogar noch mehr...), wenn man das Shop so designt wie man es selber besser findet anstatt es nach der Sichtweise deiner Kunden zu designen.

Um die Reihenfolge der Preisangabe in deinem Shopify-Theme zu ändern, sodass der ursprüngliche durchgestrichener Preis zuerst und daneben der Angebotspreis angezeigt wird, gibt es meistens, je nach Theme, eine Einstellung im Theme Editor wo man das ändern kann. Hast du geschaut ob es das in deinem Theme gibt?

Wenn nicht, dann musst du wahrscheinlich Änderungen im HTML- und CSS-Code deines Themes vornehmen - aber immer vorher in einer Themekopie/Testumgebung ausgiebig testen.

In diesem Fall im product-template.liquid oder ähnlich. Im HTML-Code suchst du dann nach den Elementen, die den ursprünglichen Preis und den Angebotspreis anzeigen (kannst du im Shopfront mit der Chrome Developer Console finden). Diese könnten Tags wie <span>, <div> oder ähnliche enthalten. Tausche die Reihenfolge dieser Elemente, sodass der ursprüngliche Preis (häufig gekennzeichnet mit einer Klasse wie .original-price oder .compare-at-price) vor dem Angebotspreis (oft mit .sale-price oder .price markiert) steht. Gehe darauf zur CSS-Datei deines Themes (oft base.css oder ähnlich benannt). Füge entweder da oder im Theme CSS Editor bei Bedarf zusätzlichen CSS-Code hinzu, um den ursprünglichen Preis durchzustreichen. Zum Beispiel:

.original-price {
  text-decoration: line-through;
}

Wenn du mit diesen Schritten nicht weiterkommst oder das Problem komplizierter ist, als zunächst angenommen, empfehle ich dir, das Support Team deines Themes oder einen Shopify-Experten zu kontaktieren. Sie können dir helfen oder die Änderungen für dich vornehmen.

---
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.