Sternchen hinter Preis setzen Produktseite

[carlottaloer]

Hallo ihr Lieben, auf der Produktseite wird ja der Preis mit z.B. €56,00 EUR angegeben. 

Darunter kommt der Nachsatz "inkl. MwSt. Versand wird beim Checkout berechnet".

Mein Medienanwalt hat mir empfohlen, den Nachsatz mit einem Sternchen zu Kennzeichnen, was ich auch umsetzen konnte. Allerdings brauche ich das Sternchen auch noch hinter dem Preis, damit die Verbindung klar ist. Das Ergebnis soll also so aussehen:

€56,00 EUR*

*inkl. MwSt. Versand wird beim Checkout berechnet

Weiß jemand, wie ich das Sternchen hinter das EUR setzen kann?

[Gabe]

Hey @carlottaloer 

Danke für die klaren Angaben und das Sternchen kann man über die standard Theme Text wie folgt zum MwSt. Satz ergänzen:

Bzgl. ein Sternchen hinter dem Preis wird es komplexer und verlangt Coding. Wenn du es selber auf deiner PDP 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!

Bzgl. dem was dein Medienanwalt sagt: innerhalb der EU, ist es rechtlich erforderlich, Preise transparent zu kennzeichnen, insbesondere wenn zusätzliche Kosten wie Steuern oder Versand anfallen. Alle Shopify Themes machen das eigentlich schon out-of-the-box und alle weitere Ergänzungen zu wie die Preise dargestellt werden ist im grossen und ganzen der Wahl überlassen.

Die Verwendung eines Sternchens zur Kennzeichnung, dass weitere Details folgen (wie in deinem Fall "inkl. MwSt. Versand wird beim Checkout berechnet"), ist somit eine gängige Praxis um die Benutzererfahrung zu verbessern sowie ggf. die Barrierefreiheiten, ist aber NICHT Pflicht laut der Preisangabenverordnung.

Artikel 246a §1 Absatz 1 des EGBGB verpflichtet Unternehmer, Verbrauchern bestimmte Informationen bei Fernabsatzverträgen zur Verfügung zu stellen. Es gibt jedoch keine spezifische Erwähnung oder Anforderung für die Verwendung eines Sternchens (*) neben Preisangaben. Die gesetzlichen Vorgaben konzentrieren sich auf die Bereitstellung klarer und lesbarer Informationen über die wesentlichen Eigenschaften der Waren oder Dienstleistungen, die Preise und zusätzliche Kosten​.

Hier ist ein Beispiel, wie du es für den regulären Preis tun kannst. Ich werde dasselbe Konzept auch auf den Verkaufspreis anwenden:

<div class="price__container">
    <div class="price__regular">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span class="price-item price-item--regular">
          €20,68<span class="price-asterisk">*</span>
        </span>
    </div>
    <div class="price__sale">
        <span class="visually-hidden visually-hidden--inline">Normaler Preis</span>
        <span>
          <s class="price-item price-item--regular">
              €25,84<span class="price-asterisk">*</span>
          </s>
        </span>
        <span class="visually-hidden visually-hidden--inline">Verkaufspreis</span>
        <span class="price-item price-item--sale price-item--last">
          €20,68<span class="price-asterisk">*</span>
        </span>
    </div>
    <small class="unit-price caption hidden">
      <span class="visually-hidden">Stückpreis</span>
      <span class="price-item price-item--last">
        <span></span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;pro&nbsp;</span>
        <span>
        </span>
      </span>
    </small>
</div>

Beachte, dass ich ein <span class="price-asterisk">*</span> direkt nach dem Preiswert hinzugefügt habe. Du kannst auch ein wenig CSS hinzufügen, um sicherzustellen, dass das Sternchen in der gewünschten Weise angezeigt wird, beispielsweise in derselben Größe und Farbe wie der Preis:

.price-asterisk {
  font-size: 1em; /* Anpassen nach Bedarf */
  color: inherit; /* Stellt sicher, dass das Sternchen dieselbe Farbe wie der Preis hat */
}

Für die technische Umsetzung bedeutet dies, dass du in deinem HTML-Template direkt hinter dem Preistag ein zusätzliches <span> oder eine ähnliche Markierung für das Sternchen hinzufügen musst. 

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.