Kennisbank
Handleidingen
Academy
Instructievideo's
Probeer te zoeken naar:
Recent bekeken artikelen:

Op deze pagina

Het zoekveld aanpassen

Het zoeken naar producten helpt klanten om in uw winkel de artikelen te vinden die ze nodig hebben. U kunt het uiterlijk van het zoekveld aanpassen aan uw winkelontwerp. Wanneer u het zoeken wilt verbeteren, kunt u ook apps van de Ecwid Appmarkt gebruiken.

Ontwerp van zoekvak wijzigen op Instant Site

Als u verkoopt op de Instant Site van Ecwid, kunt u het uiterlijk van het zoekvak op de site aanpassen bij de instellingen voor Koptekst en menu.

Search box on IS.png

Het ontwerp van het zoekvak wijzigen:

  1. Ga in de Ecwid-beheerder naar Verkoopkanalen → Instant Site beherenSite aanpassen (of WebsiteSite aanpassen).
  2. Klik op Koptekst en menu in de lijst aan de linkerkant.
  3. Schakel over naar het tabblad Ontwerp en kies de layout die u wilt.
  4. Klik op Achtergrond en kies de stijl en kleur voor de achtergrond van deze sectie.
  5. Klik op Menu en pictogrammen en kies het lettertype en de kleur voor de pictogrammen en de zoekopdrachten die in deze sectie worden ingevoerd in het zoekveld.
  6. Klik op Publiceren.

Dat is alles! De stijl, het lettertype en de kleuren die u kiest, worden nu gebruikt voor het zoekveld en het bijbehorende pictogram op uw website.

Deze instructie werkt voor de nieuwe generatie Instant Site. Als u de originele versie van de Ecwid Instant Site gebruikt, kunt u het uiterlijk van het zoekvak wijzigen met deze CSS-code (in het Engels).

Ontwerp van de zoekwidget wijzigen

Als u de zoekwidget gebruikt op Wix, Wordpress etc. of op een aangepaste website, kunt u de stijl van het invoerveld en de zoekknop wijzigen met CSS-codes.

Meer informatie over CSS-codes toevoegen aan uw winkel

U kunt de volgende CSS-codes gebruiken om het ontwerp van de elementen van de zoekwidget te wijzigen:

  1. Stijlen voor invoerveld:Customizing_the_search_box__4_.png
    /*  Stijlen voor invoerveld */
    input.ecwid-search-widget__input[type="text"] {
     width: 100px; /* wijzigen in de benodigde breedte */
     height: 20px; /* wijzigen in de benodigde hoogte */
     border: solid 1px red; /* kleur van de rand wijzigen */
     background-color: blue; /* achtergrondkleur wijzigen */
     font-size: 12px; /* grootte lettertype in zoekveld wijzigen */
     color: #000000; /* kleur lettertype in zoekveld wijzigen */
    }
    Verander de kleurcode #000000 in de benodigde kleur volgens het HTML-kleurenschema.
  2. Stijlen voor zoekknoppen:

    Customizing_the_search_box__3_.png

    /* Stijlen voor knop "Zoeken" */
    button.ecwid-search-widget__btn {
     width: 20px; /* wijzigen in de benodigde breedte*/
     height: 10px; /* wijzigen in de benodigde hoogte */
     border: solid 1px #ffffff; /*kleur van de rand wijzingen */  
     background: transparent url(image/button_search.png) no-repeat bottom center !important; /*achtergrondafbeelding toevoegen */
    }
    Verander de kleurcode #ffffffff in de benodigde kleur en vervang het deel image/button_search.png door het werkelijke absolute pad naar de achtergrondafbeelding. Bijvoorbeeld: "http://www.example.com/images/button_bg.png"

Zoekveld verplaatsen

Als u de zoekwidget gebruikt op een aangepaste website of op Wordpress, kunt u het zoekveld verplaatsen met CSS-codes.

Om de codes toe te passen, moet u ze toevoegen aan een CSS-thema in uw Ecwid-beheerder.

U kunt de volgende CSS-code gebruiken om de zoekwidget te verplaatsen:

/* verplaatsen van zoekwidget */
.ecwid-search-widget {
max-width: 170px; /* wijzigen in de benodigde breedte */
position:relative;
margin-left: 400px; /* wijzigen in de benodigde linkermarge */
margin-top: 10px; /* wijzigen in de benodigde bovenmarge */
}

Voer afhankelijk van de gewenste positie van de zoekwidget de overeenkomstige waarden in voor margin-left (linkermarge) en margin-top (bovenmarge) om de widget te verplaatsen.

Als uw winkel in Wordpress is, kunt u ook de volgende codes gebruiken:

  • Het zoekveld naar rechts verplaatsen:
    
    .ecwid-shopping-cart-search {
        text-align: right
    }
  • Het zoekveld centreren:
    
    .ecwid-shopping-cart-search {
        text-align: center
    }
Als u de zoekfunctie heeft toegevoegd aan uw Ecwid-winkel op Wix, kunt u eenvoudig het veld verplaatsen in de Wix-editor. Open de pagina waar uw winkel zich bevindt, klik op het veld om het te selecteren en sleep het naar de positie waarop u het wilt weergeven. Nadat u dit gedaan heeft, slaat u de wijzigingen op en publiceert ze.

Zoekfunctie verbeteren

Wanneer u de zoekfunctie wilt verruimen, kunt u een van de apps van de Ecwid Appmarkt gebruiken om geavanceerde zoekmogelijkheden aan uw winkel toe te voegen:

Beschikbare abonnementen: Venture, Business of Unlimited

CloudSearch

Met de CloudSearch-app versterkt u het zoeken in uw winkel met automatische suggesties. Er verschijnt een lijst met voorgestelde producten en categorieën terwijl een klant in het zoekveld typt. Deze lijst toont standaard productinformatie met een optie om naar het product te gaan.

Naast de automatische suggesties biedt CloudSearch ook verschillende andere functies:

  • spellingscorrectie – zoekopdrachten met verkeerd gespelde woorden laten nu resultaten zien
  • synoniemen - u kunt vergelijkbare woorden toevoegen om bij het zoeken dezelfde resultaten te tonen
  • promotie van bepaalde producten wanneer een bezoeker op een specifiek trefwoord zoekt
  • zoekstatistieken bekijken in uw Ecwid-beheerder

Dit is een betaalde app met een gratis proefperiode van 30 dagen.

Was dit artikel nuttig?

Fantastisch! Bedankt voor uw feedback!

Bedankt voor uw feedback!

Wat vervelend! Wat ging er mis?
Aantal gebruikers dat dit nuttig vond: 2 van 9
10
We gebruiken cookies en vergelijkbare technologieën om uw voorkeuren te onthouden, de effectiviteit van onze campagnes te meten en gedepersonaliseerde gegevens te analyseren om onze site beter te laten werken. Door «Accepteren» te kiezen, stemt u in met het gebruik van cookies.
Cookies accepteren Afwijzen