Jak přidat vyhledávač produktů (searchbox) ve Webnode e-shopu?

Chtěli byste vyhledávač např. produktů na Vašem e-shopu od Webnode?

Hledáte jednoduché a stylové vyhledávací políčko, které si vložíte na Váš web či e-shop ve Webnode?

VIDEONÁVOD:

V návodu Jak na web přidat vlastní vyhledávací pole? Google Custom Search jsme si ukázali jednoduchý vyhledávač od Google. Ne každému avšak tento jednoduchý vyhledávač od Google vyhovuje.

V tomto návodu si ukážeme externí vyhledávač SearchIQ, který si automaticky načte všechny stránky Vašeho webu / e-shopu

a následně Vám poskytne HTML kód vyhledávače, který si jednoduše vložíte na Váš web nebo e-shop.

Pokud nemáte na webu, či e-shopu více než 2000 stránek (např. produktové stránky, či jiné stránky webu), tak nemusíte za tento vyhledávač vůbec nic platit.

JE TO ZCELA ZDARMA.

Ve variantě FREE (zdarma) je také dostupná podpora skrz fórum.

Služba SearchIQ nabízí zdarma i statistiku hledaných výrazů, kterou si můžete prohlížet přímo online v jejich uživatelském prostředí.

SearchIQ je vhodný jako vyhledávač produktů v e-shopu nebo vyhledávač pro klasický web či blog.

Na mém webu Wpromotions.eu používám vyhledávač SearchIQ. Pokud ho chcete vyzkoušet, použijte prosím vyhledávač na tomto webu.

Návod rozdělím na 3 části:

1. Registrace v SearchIQ a získání kódů
2. Vložení kódů na Váš web
3. Úprava vzhledu vyhledávače

První část – registrace a získání kódů vyhledávači

1. První krok je registrace v externí službě SearchIQ. Registrovat se můžete na oficiálním webu: https://www.searchiq.co/

Začněte kliknutím na tlačítko „Get Started„.

3. Ověřte si Vaši e-mailovou adresu kliknutím na odkaz, který Vám poslali.
Pokud email nechodí – mrkněte do SPAMU či Reklam.

Po ověření emailu se přihlaste.

4. Po přihlášení ve službě zvolte možnost „No, its something else„.

5. Zadejte URL adresu Vašeho webu a klikněte na „Add Site„
*Např. URL adresa mého webu je https://www.wpromotions.eu/

6. Po dokončení Vás aplikace automaticky přesměruje do sekce „Interface“ a „Installation„, kde najdete 3 kódy, které je třeba vložit na Vaše webové stránky nebo e-shop, aby mohl vyhledávač od SearchIQ správně fungovat.

Druhá část – vložení kódů na Váš web či e-shop

První kód, který Vám aplikace poskytla vložte do sekce HTML Hlavička na všechny stránky webu.

Vyberte si způsob vložení prvního kódu – podle toho, jaké Prémiové služby ve Webnode využíváte:

Výborně – první kód SearchIQ jste úspěšně vložili.

Druhý kód je třeba vložit na místo, kde chcete, aby se vyhledávací políčko na webu zobrazilo.

TIP: Ve druhém kódu si můžete upravit text, který se bude ve vyhledávači zobrazovat.

Předdefinované „Type here to search …“ v kódu změňte na např. Hledat nebo si to samozřejmě upravte podle vlastního uvážení 🙂

V publikované verzi Vašeho webu byste měli nyní vidět malé okénko vyhledávače.

Třetí kód (úplně poslední) SearchIQ vložte na samostatnou stránku např. Výsledky vyhledávání:

Publikujte změny

Přejděte do aplikace SearchIQ a v sekci „Interface“ – „Result Page“ do kolonky „Result Page URL“ přidejte URL adresu vaší stránky s výsledky.

Výborně – vyhledávač SearchIQ máte v základním vzhledu nastaven správně.

Poslední krok je nyní upravit vzhled, aby se místo malého okénka zobrazilo klasické vyhledávací okno.

Třetí část – úprava vzhledu

Vyhledávač SearchIQ umožňuje úpravu vzhledu vyhledávacího okna přidáním vlastního CSS kódu.

K tomu, aby vyhledávací okénko vypadalo přesně tak, jak vypadá na mém ukázkovém webu je třeba přidat do aplikace SearchIQ vlastní CSS kód.

Přihlaste se k odběru novinek – Wiliam Promotions News – a získejte předpřipravený kód, který upraví vzhled Vašeho SearchIQ vyhledávače.

A kam vložit můj CSS kód?

V aplikaci SearchIQ přejděte na stránku „Interface“ – „General“ a do kolonky „Custom CSS“ vložte můj kód.

HOTOVO – Výborně, poslední krok máte úspěšně za sebou a Vaše vyhledávací okénko se zobrazuje v novém kabátě 🙂

Změnu vzhledu vyhledávači uvidíte hned v publikované verzi Vašeho webu.

Doufám, že Vám vyhledávač správně funguje a vše proběhlo bez problémů.

Napište mi prosím do komentářů, zda se Vám to podařilo 🙂

Budu rád za jakoukoli zpětnou vazbu.

Další skvělé návody