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.
Het ontwerp van het zoekvak wijzigen:
- Ga in de Ecwid-beheerder naar Verkoopkanalen → Instant Site beheren → Site aanpassen (of Website → Site aanpassen).
- Klik op Koptekst en menu in de lijst aan de linkerkant.
- Schakel over naar het tabblad Ontwerp en kies de layout die u wilt.
- Klik op Achtergrond en kies de stijl en kleur voor de achtergrond van deze sectie.
- 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.
- 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.
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:
- Stijlen voor invoerveld:
Verander de kleurcode #000000 in de benodigde kleur volgens het HTML-kleurenschema./* 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 */ }
- Stijlen voor zoekknoppen:
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"/* 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 */ }
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 }
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:
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.