Wissensdatenbank
Leitfäden
Academy
Video-Tutorials
Versuchen Sie es mit:
Zuletzt angesehene Artikel:

Inhaltsverzeichnis

Anpassen des Suchfelds

Die Produktsuche hilft Ihren Kunden, die gewünschten Produkte in Ihrem Shop zu finden. Sie können das Aussehen des Suchfelds selbst ändern, um es an das Design Ihres Shops anzupassen. Falls Sie die Suche verbessern möchten, können Sie auch Apps aus dem Ecwid App-Markt verwenden.

Ändern des Designs des Suchfelds auf der Instant Site

Wenn Sie auf Ecwids Instant Site verkaufen, können Sie das Aussehen des Suchfelds auf der Seite in den Einstellungen unter Menü & Kopfzeile anpassen.

Search box on IS.png

Um das Design des Suchfelds zu ändern:

  1. Gehen Sie in Ihrer Ecwid-Verwaltung zu Verkaufskanäle → Instant Site verwaltenWebsite bearbeiten (oder WebseiteWebsite bearbeiten).
  2. Сklicken Sie auf den Abschnitt Menü & Kopfzeile in der Liste auf der linken Seite.
  3. Wechseln Sie auf die Registerkarte Design und wählen Sie das Blocklayout, das Ihnen gefällt.
  4. Klicken Sie auf Hintergrund und wählen Sie den Stil und die Farbe für den Hintergrund Ihres Abschnitts.
  5. Klicken Sie auf Menü & Symbole und wählen Sie Schriftart und Farbe für die Symbole Ihres Bereichs und die in das Suchfeld eingegebenen Abfragen.
  6. Klicken Sie auf Veröffentlichen.

Das war's! Der Stil, die Schriftart und die Farben, die Sie auswählen, werden für das Suchfeld und sein Symbol auf Ihrer Website verwendet.

Diese Anweisung funktioniert für die Instant Site der nächsten Generation. Wenn Sie die Originalversion von Ecwids Instant Site verwenden, können Sie folgenden CSS-Code (auf Englisch) anwenden, um das Aussehen des Suchfeldes zu ändern.

Ändern des Designs des Such-Widgets

Wenn Sie das Such-Widget auf Wix, Wordpress usw. oder auf einer angepassten Website verwenden, dann können Sie den Stil des Eingabefeldes und der Suchschaltfläche mit CSS-Codes ändern.

Erfahren Sie, wie Sie CSS-Codes in Ihrem Shop hinzufügen

Sie können die folgenden CSS-Codes verwenden, um das Design der Such-Widget-Elemente zu ändern:

  1. Stile der Eingabefelder:Customizing_the_search_box__4_.png
    /* Stile der Eingabefelder */
    input.ecwid-search-widget__input[type="text"] {
     width: 100px; /* Breite nach Bedarf ändern*/
     height: 20px; /* Höhe nach Bedarf ändern*/
     border: solid 1px red; /* Rahmenfarbe ändern */
     background-color: blue; /* Hintergrundfarbe ändern */
     font-size: 12px; /* Schriftgröße im Suchfeld ändern */
     color: #000000; /* Schriftfarbe im Suchfeld ändern */
    }
    Ändern Sie den Farbcode #000000 nach Bedarf gemäß der HTML-Farbtabelle.
  2. Stile der Suchschaltfläche:

    Customizing_the_search_box__3_.png

    /* Stile der Suchschaltfläche */
    button.ecwid-search-widget__btn {
     width: 20px; /* Breite nach Bedarf ändern*/
     height: 10px; /* Höhe nach Bedarf ändern*/
     border: solid 1px #ffffff; /*Rahmenfarbe ändern*/  
     background: transparent url(image/button_search.png) no-repeat bottom center !important; /*Hintergrundbild hinzufügen*/
    }
    Ändern Sie den Farbcode #ffffff nach Bedarf und ersetzen Sie den Teil image/button_search.png durch den tatsächlichen absoluten Pfad zum Hintergrundbild. Zum Beispiel: "http://www.example.com/images/button_bg.png"

Verschieben des Suchfeldes

Wenn Sie das Such-Widget auf einer angepassten Website oder auf Wordpress verwenden, dann können Sie das Suchfeld mit CSS-Codes verschieben.

Um die Codes anzuwenden, sollten Sie sie einem CSS-Thema in Ihrer Ecwid-Verwaltung hinzufügen.

Sie können den folgenden CSS-Code verwenden, um das Such-Widget zu verschieben:

/* Such-Widget verschieben */
.ecwid-search-widget {
max-width: 170px; /* Breite nach Bedarf ändern*/
position:relative;
margin-left: 400px; /* Linken Rand nach Bedarf ändern*/
margin-top: 10px; /* Oberen Rand nach Bedarf ändern*/
}

Je nach der gewünschten Position des Such-Widgets geben Sie die entsprechenden Werte für margin-left und margin-left ein, um es zu verschieben.

Wenn Ihr Shop auf Wordpress läuft, können Sie auch die folgenden Codes verwenden:

  • Um das Suchfeld nach rechts zu verschieben:
    
    .ecwid-shopping-cart-search {
        text-align: right
    }
  • Um das Suchfeld zu zentrieren:
    
    .ecwid-shopping-cart-search {
        text-align: center
    }
Wenn Sie Ihrem Ecwid-Shop auf Wix eine Suche hinzugefügt haben, können Sie Ihr Suchfeld ganz einfach im Wix-Editor verschieben. Öffnen Sie einfach die Seite, auf der sich Ihr Shop befindet, klicken Sie auf das Feld, um es auszuwählen, und ziehen Sie es per Drag & Drop an die gewünschte Position. Wenn Sie fertig sind, speichern und veröffentlichen Sie die Änderungen.

Verbessern der Suchfunktionalität

Wenn Sie die Suchfunktionalität erweitern möchten, können Sie eine der Apps aus dem Ecwid App-Markt verwenden, um eine erweiterte Suche zu Ihrem Shop hinzuzufügen:

Verfügbar in folgenden Paketen: Venture, Business, Unlimited.

CloudSearch

Die App CloudSearch verbessert die Suchfunktion Ihres Shops mit automatischen Vorschlägen. Während ein Kunde einen Begriff in das Suchfeld eingibt, erscheint eine Liste mit vorgeschlagenen Produkten und Kategorien. Diese Liste zeigt grundlegende Produktinformationen mit einer Option zum Aufrufen des Produkts.

CloudSearch bietet neben den automatischen Vorschlägen auch verschiedene andere Funktionen:

  • Rechtschreibkorrekturen – Suchanfragen mit falsch geschriebenen Wörtern liefern jetzt ebenfalls Ergebnisse
  • Synonyme – Sie können ähnliche Wörter hinzufügen, um bei der Suche die gleichen Ergebnisse anzuzeigen
  • Werbung für bestimmte Produkte, wenn ein Besucher nach einem bestimmten Stichwort sucht
  • Suchstatistiken in Ihrer Ecwid-Verwaltung

Dies ist eine kostenpflichtige App mit einer 30-tägigen kostenlosen Testversion.

Clickable Brand

Mit der App Clickable Brand können Sie die Navigation in Ihrem Shop verbessern, indem Sie das Markenattribut klickbar machen. Dies ermöglicht das Filtern von Produkten nach Marke.

Dies ist eine kostenpflichtige App mit einer 14-tägigen kostenlosen Testversion.

Erfahren Sie, wie Sie Ihren Produkten das Markenattribut zuweisen →

Um Ihrem Schaufenster eine facettierte Suche hinzuzufügen, können Sie Produktfilter verwenden.
War dieser Beitrag hilfreich?

Großartig! Vielen Dank für Ihr Feedback!

Vielen Dank für Ihr Feedback!

Das tut uns leid! Was ist schief gelaufen?
2 von 9 fanden dies hilfreich
10
Wir verwenden Cookies und ähnliche Technologien, um Ihre Präferenzen zu speichern, die Effektivität unserer Kampagnen zu messen und anonymisierte Daten zu analysieren, um die Leistung unserer Website zu verbessern. Mit der Auswahl von „Akzeptieren“ stimmen Sie der Verwendung von Cookies zu.
Cookies akzeptieren Ablehnen