Warenkorb und Suche Hover im Header entfernen

Deutsch Diskussion Technische Fragen & Antworten
, ,
1

Hallo,

ich versuche den Hover bei der Suche und Warenkorb im Header zu entfernen. Bei den Kategorien habe ich es geschafft mit Hilfe. Bei der Suche und Warenkorb komme ich leider nicht weiter…

mrserious_0-1692601063375.png
mrserious_0-1692601063375.png646×789 36.1 KB

Danke für jede Hilfe!

Gruß

2

Hi @mrserious ,

vielen Dank für deinen Post.

Ich helfe dir gerne dabei einen Weg zu finden deinen Shopify Shop so wie gewünscht anzupassen.

Kannst du mir dazu sagen welches Theme du für deinen Shopify Shop verwendest? Wer dein Theme entwickelt hat und unterstützt siehst du so nach.

3

Ich benutze das DAWN Theme und habe bis jetzt alles selbst gemacht bzw mit Hilfe aus der Community

4

Super, das freut mich zu hören, dass unser Forum eine Hilfe ist.

Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren, die erlautern, wie man einen Shopify Shop erstellt, der sich von anderen abhebt. Welche davon würdest du in deinem eigenen Shopify Shop gerne umsetzen?

5

Ich möchte nur das Hover von meinem Warenkorb und der Suche entfernen

6

Hey @mrserious

Super dass du mit der Hilfe der Community weiter gekommen bist. :eyes: wir jetzt wie du den Mouse-over Hover-Effekt im Such- und auch im Warenkorb Icon im Header entfernen kannst.

Da du dein Theme Code stark geändert hast, nehme ich an, verzichtest du auf die Theme Updates?

Die Schritte die du ausprobieren kannst (habe ich selber nicht getestet) und dafür gibt es entweder den CSS Editor im Theme Editor, oder den Code Editor selbst:

  1. Identifiziere die Elemente: Zuerst musst du die HTML-Elemente identifizieren, die die Such- und Warenkorb-Symbole enthalten. Dies könnten <div>, <span> oder andere Elemente sein. Du kannst die Console Entwicklertools deines Browsers verwenden (Rechtsklick im Header → “Inspect”), um die genauen HTML-Strukturen zu überprüfen.

  2. Füge benutzerdefinierten CSS hinzu: Sobald du die Elemente identifiziert hast, füge benutzerdefinierten CSS-Code hinzu, um den Hover-Effekt zu entfernen. Du kannst das in deinem Stylesheet oder direkt im HTML-Code machen (wobei das Stylesheet empfohlen wird, um den Code sauber zu halten).

    Zum Beispiel könntest du für das Entfernen des Hover-Effekts auf einem Element mit der Klasse “search-icon” folgenden CSS-Code verwenden:

.search-icon:hover {
    /* Füge hier Stile hinzu, um den Hover-Effekt zu entfernen */
    /* Zum Beispiel: */
    cursor: default; /* Ändert den Mauszeiger beim Hover */
    /* Oder: */
    text-decoration: none; /* Entfernt mögliche Link-Unterstreichungen */
}

Wiederhole diesen Vorgang für das Warenkorb-Symbol oder andere Elemente, die du anpassen möchtest. Es ist möglich, dass zusätzliche Anpassungen erforderlich sind, um den gewünschten Effekt zu erzielen.