Aktion und 2+1

[Leca]

Hallo Zusammen,

kann mir jemand sagen wie ich das mache wie im angehängten bild?

 

 

[Gabe]

Hey @Leca 

Bevor wir eine falsche Sackgasse hier runtergehen, es scheint du meinst das Label mit 2+1 aber es ist nicht ganz klar, was für ein Schild das ist und wo genau du das haben möchtest. Hast du vielleicht ein Beispiel wie eine Produktseite oder eine Kategorieseite? Oder auf der Homepage?

Lass auch wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Leca]

https://pamura.com/products/thermo-tights?variant=31776293388369 

https://pamura.com/collections/damen-kleidung

Hier 2 Bespiele

[Gabe]

Ok @Leca, danke für die Links und die scheinen auf ein Shop mit dem Dawn Theme und einer eigenen Anpassung im Code zu leiten.

Der Discount und der Aktion Label wurde als Image (um die 100px x 53px) von den Ladenbetreiber sowohl in den Product.liquid als auch den .css Code eingebaut wie man in der Developer Console sehen kann (Rechtsklick auf das Element -> Inspect):

Somit müsstest du das mit einem Experten machen und gerne kann ich welche empfehlen 😉

Oder viel einfacher: du schaust unsere Apps an. Um dir den Aufwand zu reduzieren habe ich hier ein paar Demos zusammengesammalt durch die du klicken kannst um zu schauen ob da etwas für dich mit dabei ist:

Wenn du gerne "Sale-Badges" auf die Produkte anwenden dann geht das schnell über eine App. Möchtest du diese auch auf den Kategorie Seiten anzeigen?

Produkt-Labels wie NEU oder Sale oder Discount oder Aktion sind auch ein wesentlicher Bestandteil eines jeden Online Shops denn der Besucher möchte ja die versch. Statuse der Produkte auf Anhieb sehen können. 

Wir haben einige Apps wie Modemagic entwickelt, mit der man innerhalb weniger Sekunden Produktaufkleber/Badges zu Ihrem Katalog hinzufügen kann. Da gibt es umfangreiche Sammlungen von benutzerdefinierten Aufklebern, die auf verschiedenen Anlässen basieren (Verkauf & Rabatte, Vorbestellung, Vertrauensabzeichen und vieles mehr). Man kann auch benutzerdefinierte Abzeichen erstellen, basierend darauf, welche Methode man bevorzugt. Siehe Beispiele hier:

Ohne App wird das wie gesagt einen Experten-Programmierer verlangen was du brauchst (gerne kann ich welche empfehlen), oder du testest einfach weitere Themes in deinem Shop die diesen "Product Label" Feature bereits out-of-the-box mit eingebaut haben wie beispielsweise diese hier (einfach durch die Demos klicken um die Features in Action zu sehen).

Apps die das auch können sind:

• Prime Badges Labels & Stickers, 
• Labelfy ‑ Product Labels, 
• Product Labels and Badges, 
• Product Labels & Badges Pro

Weitere Product Label Badge Apps sieht man hier.

DIY?

Dann kann man das auch DIY (do-it-yourself) machen wenn man sich traut im Code zu basteln.

• Wichtig: immer zuerst in einer Theme-Kopie vorher testen bevor man es im Live Theme implementiert. Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.
  Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation (https://bit.ly/3oCC5qc).

Man kann z. B. es so haben dass die Badge automatisch die prozentuale Ersparnis aus dem Vergleichspreis und dem Verkaufspreis berechnet. Die Plakette könnte so etwas sagen wie "Sie sparen 50 %" usw. Ein Code, den man verwenden könnte, um das Verkaufsabzeichen anzuzeigen wäre der folgende und diesen fügt man im Kollektion- oder Produktvorlage Code hinzu und auch das css entsprechend anpassen im base.scss unter "Assets".

{% if product.compare_at_price_max > product.price %}Du sparst {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% {% endif %}

Copy

Im product-template erhaltet man den regulären Preis und den Vergleichspreis. Mit diesen Werten kann den Prozentsatz finden und ihn an der gewünschten Stelle anzeigen.

Wenn das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier und wir können das anschauen.

---
Lass auch wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.