Rabatt Badge bei Varianten

[TillBa]

Hallo liebe Shopify Community,

ich habe auf den Produktseiten verschiedene Varianten, bei denen der Kunde zwischen unterschiedlichen Flaschenanzahl wählen kann. Umso höher die Anzahl der Flaschen, desto höher der Rabatt.

Sprich: 1 Flasche -> regulärer Preis; 6 Flaschen -> 5% Rabatt; 12 Flaschen -> 8% Rabatt; 18 Flaschen -> 10% Rabatt.

Aktuell sieht es bei mir im Shop folgendermaßen aus:

https://baumann-weine.de/products/riesling-fruchtig
Passwort: Config1928

Der Rabatt wird angezeigt, jedoch nur wenn man die jeweilige Variante bzw. Anzahl der Flaschen anklickt. Ich würde gerne die Höhe des Rabatts für die einzelnen Varianten jedoch bereits direkt unterhalb der verschiedenen Varianten wie im folgenden Beispiel anzeigen lassen:

Es handelt sich um folgenden Shopify Store: https://schorlefranz.com/products/franzi-rose-sekt?variant=43690945151240

Hättet ihr eine Idee, wie man den Rabatt als Badge in die Varianten einfügen kann?

Vielen Dank für eure Hilfe!

VG
Till

[Gabe]

Hey Till! @TillBa 

Danke für die Bilder und den Links und das Erstellen einer Discount-Badge für jede Produktvariante auf der Produktseite ist eine gute Idee, um den Kunden auf verfügbare Rabatte hinzuweisen, bevor sie eine Auswahl treffen. Es gibt aber eine reihe Apps die das können, wie z. B. diese hier, und auch diese. 

In deinen Shop sehe ich den folgenden Discount Badge:

Aber du möchtest lieber diesen hier:

Ein Rechtsklick auf diese Stelle -> Inspect Chrome Developer Console -> ergibt den folgenden Code:

<label for="template--16194257027336__main-1-1" class="secondVariant">
             6 Flaschen
                     <center>
                       <div class="sparen-tags">
                         <span class="f-08">Spare 5%</span>
                       </div>
                     </center>

             <style>
               .product-form__input input[type='radio'] + label {
                 margin-bottom:15px;
               }
             </style>   
               <!-- Wintersale 30% Tags -->

</label>

Somit scheint es eine eigene Anpassung in diesem Shop zu sein, dass mit einem Experten eingebaut wurde. Dieser Beispielcode zeigt einen Ansatz für HTML und CSS und um das für alle Produkte zu implementieren, musst du sicherstellen, dass der Rabatt-Text dynamisch auf Basis der Produktvariante generiert wird.

Wenn du es selber auf deiner Produktseite 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!

Gehe zu deinem Produkt-Template-Code, das ist meist product-template.liquid oder ähnlich, je nachdem, welches Theme du verwendest. Finde den Bereich, in dem die Varianten-Optionen gerendert werden. Füge eine FOR-Loop in den Liquid-Code hinzu, um den Rabatttext basierend auf der Variante zu generieren. Hier ist ein einfacher Beispielcode, um dir eine Idee zu geben:

{% for variant in product.variants %}
  {% assign discount_percentage = 0 %}
  {% if variant.title contains "6 Flaschen" %}
    {% assign discount_percentage = 5 %}
  {% elsif variant.title contains "12 Flaschen" %}
    {% assign discount_percentage = 8 %}
  {% elsif variant.title contains "18 Flaschen" %}
    {% assign discount_percentage = 10 %}
  {% endif %}
  {% if discount_percentage > 0 %}
    <label for="{{ variant.id }}" class="secondVariant">
      {{ variant.title }}
      <center>
        <div class="sparen-tags">
          <span class="f-08">Spare {{ discount_percentage }}%</span>
        </div>
      </center>
    </label>
  {% else %}
    <label for="{{ variant.id }}" class="secondVariant">
      {{ variant.title }}
    </label>
  {% endif %}
{% endfor %}

Füge zusätzlichen CSS-Code hinzu, um die Rabatt-Badges zu stylen. Das könntest du direkt im CSS-Teil deines CSS Editor im Theme Editor tun, oder in einem separaten CSS-File, wenn du die Styles extern organisierst. Hier ein einfaches Beispiel:

.sparen-tags {
  background-color: #ff6f61;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  display: inline-block;
}

.f-08 {
  font-size: 0.8em;
}

• Achte darauf, dass deine Varianten-Namen ("6 Flaschen", "12 Flaschen", etc.) konsequent sind, um Konflikte oder Fehler zu vermeiden.
• Teste die Änderungen sorgfältig, um sicherzustellen, dass sie wie erwartet funktionieren und nicht mit anderen Funktionen auf deiner Website interferieren.

Wenn du nicht mit Liquid oder Code-Anpassungen vertraut bist, könnte es hilfreich sein, einen Shopify-Experten oder Entwickler zu Rate zu ziehen, um sicherzustellen, dass Änderungen effektiv und sicher implementiert werden.