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.

Um das Design des Suchfelds zu ändern:

1. Gehen Sie in Ihrer Ecwid-Verwaltung zu Verkaufskanäle → Instant Site verwalten → Website bearbeiten (oder Webseite → Website 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.

Ä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:

   /* 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:
   

   

   /* 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
  }

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:

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.