Wie kriege ich das ,,On sale'' weg?

Topic summary

Thema: Im Shopify-Theme „Refresh“ erscheint unten links ein leeres „On sale“-Kästchen auf Produktbildern, nachdem der Text in den Standard-Theme-Texten gelöscht wurde. Wunsch: Kästchen komplett entfernen oder Badge oberhalb des Produktbildes platzieren.

Vorgehen & Hinweise:

  • Support identifizierte die Badge-Elemente im HTML/CSS (u. a. Klassen „card__badge“, „badge–bottom-left“, „color-background-1“).
  • Empfohlene Lösung über benutzerdefiniertes CSS im Theme-Editor: Elemente mit den Klassen „.card__badge.top.left“ und „.badge–bottom-left“ per display: none !important ausblenden.
  • Hinweis: Vorherige generische CSS-Tipps aus einem Community-Thread wirkten nicht; die präzisere Zielauswahl der Klassen ist entscheidend.

Ergebnis:

  • Der CSS-Ansatz funktionierte; das Kästchen wurde entfernt. Keine Lösung zur Umpositionierung (oberhalb des Produktbildes) wurde umgesetzt.

Sonstiges:

  • Rückfrage zum Marken-Branding im oberen Halbkreis: stammt laut Fragesteller von einem Freelancer (Details unbekannt).
  • Screenshots/Entwicklerkonsole waren zentral für die Identifikation der Klassen.

Status: Problem gelöst (Badge ausgeblendet); Thread abgeschlossen, keine offenen Fragen.

Summarized with AI on January 6. AI used: gpt-5.

Hey @mikesch23

Danke für das Bild und das Problem der Sales/Sold Out Badges des Refresh Themes - hast du das lösen können? Frage dazu: wie hast du dein Branding in den oberen Halbkreis des Bildes eingebaut, wenn ich fragen darf?

Das habe ich jetzt in meinem Refresh Theme in der Developer Console getestet und folgenden HTML für die Sales Badges gefunden:


             Kopie von Canvas-Einkaufstasche der Marke DIDABEAR
           

Hier wäre zusätzlich das Kästchen in den ,Standard-Theme-Texte bearbeiten’’ wo du den “On Sale” Text entfernt hast hilfreich zu wissen, sowie welcher Abschnitts-Typ das ist, oder ob das im Product Grid der Kategorieseite ist.

Um das Problem mit dem Abzeichen auf deinem Shopify Produktbild zu beheben, gibt es verschiedene Ansätze, die du versuchen kannst. Da die vorgeschlagenen CSS-Lösungen aus einem Community-Forum Beitrag hier für mich keine Wirkung erzielt hat, und somit ist es wichtig, dass die CSS-Klasse, die du zu verbergen versuchst, korrekt identifiziert wird um die CSS-Regeln korrekt anzuwenden.

Basierend auf dem HTML-Code, scheint das Abzeichen mit der Klasse card__badge und möglicherweise auch badge--bottom-left oder color-background-1 verbunden zu sein. Du könntest versuchen, eine spezifischere CSS-Regel zu verwenden, um sicherzustellen, dass das Abzeichen korrekt angesprochen und versteckt wird. Versuche folgenden CSS-Code in deinem Theme-Editor im Bereich Benutzerdefiniertes CSS einzupflegen:

.card__badge.top.left, .badge--bottom-left {
    display: none !important;
}

Dieser hat bei mir geholfen die Sales Badges zu entfernen! Dieser Code zielt darauf ab, Elemente mit der Klasse card__badge zu verstecken, die zusätzlich als oben links (top left) positioniert gekennzeichnet sind, sowie jedes Element mit der Klasse badge--bottom-left, allerdings mit einer spezifischeren Positionierung, um das Risiko einer unbeabsichtigten Auswirkung auf andere Elemente zu minimieren.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Habt ihr auch den Shop auf den Valentinstag ? umgestellt? Jetzt ist die Zeit wo Online Shopper nach :wrapped_gift: für ihre :heart: :eyes: !

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.