Inhaltsverzeichnis
Einführung
Haben Sie sich schon einmal gefragt, wie Sie das ästhetische Erscheinungsbild Ihres Shopify-Shops optimieren können, indem Sie das Sale-Tag von Produkten entfernen, aber sich in technischen Details verstrickt fühlen? Sie sind nicht allein. Das Vorhandensein eines Sale-Tags, während es vorteilhaft ist, um Angebote hervorzuheben, passt möglicherweise nicht zur visuellen Strategie jedes Shop-Besitzers. Dieser Leitfaden zielt darauf ab, den Prozess zu entmystifizieren, Sie mit dem Know-how auszustatten, um diese Tags zu entfernen, und sicherzustellen, dass die Präsentation Ihrer Website der Ethik Ihrer Marke entspricht. Egal, ob Sie ein hochwertiges Erscheinungsbild beibehalten oder einfach Ihre Produktseiten entrümpeln möchten, dieser Blog-Beitrag deckt alle Bereiche ab. Sie werden mit praktischem Wissen gehen, das nicht nur die User-Experience Ihres Shops verbessert, sondern auch Ihren einzigartigen Branding-Bedürfnissen dient.
Lassen Sie uns in die Details eintauchen, wie Sie diese Leistung erbringen können, abgestimmt auf verschiedene Themes und ohne umfangreiche Codierkenntnisse.
Grundlagen verstehen
Bevor wir in die Details eintauchen, lassen Sie uns festlegen, was ein Sale-Tag im Kontext von Shopify ist. Diese Tags sind automatisch generierte Labels, die auf Produktbildern erscheinen, um rabattierte Artikel für potenzielle Kunden zu kennzeichnen. Obwohl sie für Werbeaktionen effektiv sind, passen sie möglicherweise nicht zu jeder Marketingstrategie oder ästhetischen Wahl.
Die Rolle von Shopify-Themes
Shopify-Themes spielen eine entscheidende Rolle bei der Anzeige von Sale-Tags, da jedes Theme über seinen einzigartigen Code und Designelemente verfügt. Dies bedeutet, dass die Methode zur Entfernung von Sale-Tags je nach Theme erheblich variieren kann. Themes wie Boundless, PageFly, Dawn und Debutify, unter anderen, weisen ihre eigenen Anpassungsoptionen und Codierstrukturen auf.
Schritt-für-Schritt-Anleitung pro Theme
Für Boundless und ähnliche Themes
- Navigieren Sie zu Ihrem Shopify-Admin-Dashboard, zu 'Online-Shop' > 'Themes'.
- Wählen Sie Ihr Theme und klicken Sie auf 'Aktionen' > 'Code bearbeiten'.
- Suchen Sie im 'Assets'-Ordner nach
theme.scss.liquidodertheme.css, abhängig von der Struktur Ihres Themes. - Fügen Sie am Ende dieser Datei den folgenden CSS-Schnipsel ein:
.product-item .product-item__badge { display: none !important; }Dies verbirgt das Sale-Label für alle Produkte, indem es seine spezifische CSS-Klasse anspricht.
Verwenden von PageFly - Fortgeschrittener Seiten-Builder
Für diejenigen, die PageFly oder ähnliche Seiten-Builder-Apps zur zusätzlichen Anpassung verwenden:
- Wählen Sie vom PageFly-Dashboard aus die Seite mit den mit Sale markierten Produkten.
- Gehen Sie zum HTML/CSS-Editor der Seite und fügen Sie den gleichen CSS-Schnipsel ein, den wir oben verwendet haben, angepasst an die PageFly-Umgebung.
Für Dawn und andere responsive Themes
Der Prozess ist ähnlich, aber für responsive Design-Überlegungen angepasst, insbesondere für Mobilansichten:
- Befolgen Sie die ersten Schritte, um auf den Code-Editor Ihres Themes zuzugreifen.
- Fügen Sie am Ende Ihrer
theme.cssodertheme.scss.liquidDatei einen responsiven CSS-Schnipsel wie unten ein:
@media (max-width: 767px){ .product-item .product-item__badge { display: none !important; }}Dies stellt sicher, dass das Sale-Label auf allen Geräten verborgen ist und die Konsistenz im Erscheinungsbild Ihres Shops beibehalten wird.
Wenn Code-Schnipsel nicht funktionieren
In einigen Fällen können direkte Eingriffe in den Theme-Code aufgrund von Theme-Updates, Anpassungen oder spezifischen Theme-Einschränkungen keine Ergebnisse liefern. Hier ist, was Sie tun können:
- Überprüfen Sie die CSS-Klasse erneut: Stellen Sie sicher, dass der Klassenname
.product-item__badgemit der in Ihrem Theme verwendeten Klasse übereinstimmt. Klassennamen können variieren. - Kontaktieren Sie den Theme-Support: Bei Premium-Themes wie Debutify oder Studio kann das Erreichen des Theme-Entwicklers für Unterstützung eine maßgeschneiderte Lösung bieten.
- Verwenden Sie einen Shopify-Experten: Wenn Sie sich nicht wohl dabei fühlen, den Theme-Code zu bearbeiten, oder falls Ihre Versuche nicht funktioniert haben, könnte es sich lohnen, einen Shopify-Experten einzustellen.
Fazit
Das Entfernen von Sale-Tags in Shopify erfordert eine Mischung aus strategischem Denken und technischer Handlung. Indem Sie die spezifischen Anforderungen Ihres Themes verstehen und die geeigneten CSS-Anpassungen vornehmen, können Sie eine sauberere, mehr auf Ihre Marke ausgerichtete Präsentation Ihrer Produkte erreichen. Denken Sie daran, das Ziel ist nicht nur, ein Tag zu entfernen, sondern das Einkaufserlebnis für Ihre potenziellen Kunden zu verbessern.
Durch die oben angeführten Schritte hoffen wir, einen klaren Weg aufgezeigt zu haben, um dies zu erreichen, unabhängig von Ihren Codierkenntnissen oder dem Theme, das Ihr Shop verwendet.
FAQ
1. Beeinträchtigt das Entfernen von Sale-Tags mein Shops-SEO?
Nein, das Entfernen von Sale-Tags ist eine Änderung im Frontend und beeinträchtigt nicht das SEO Ihres Shops.
2. Kann ich Sale-Tags nur von bestimmten Produkten entfernen?
Ja, durch Anpassen des CSS-Codes und Zielen auf spezifische Produkte anhand ihrer eindeutigen Klassen oder IDs können Sie Sale-Tags selektiv ausblenden.
3. Ist es möglich, das Sale-Tag wieder einzublenden, nachdem es entfernt wurde?
Auf jeden Fall. Das Entfernen des CSS-Schnipsels, der für das Ausblenden der Sale-Tags verantwortlich ist, macht sie wieder sichtbar.
4. Beeinflusst das Ausblenden des Sale-Tags die Anzeige des 'Vergleichspreises'?
Nein, der Vergleichspreis wird weiterhin angezeigt, da er im Backend von Shopify anders verwaltet wird.
5. Können diese Änderungen vor dem Live-Schalten vorab überprüft werden?
Ja, Shopify ermöglicht es Ihnen, Änderungen in Echtzeit über den Theme-Editor zu überprüfen, bevor die Änderungen für Ihre Kunden live geschaltet werden.
