Styling Swiftype Search Bar

[rowan]

Hello!
It’s not difficult to integrate the Swiftype search function inside Webflow. Very easy actually! But I can’t seem to style the search field. Whatever I try, it will not take the custom styling. How should I do this? Please help!

This is the link with working Swiftype bar: http://seamlessdocs-template.webflow.io/ (not styled, default styling)
This is the link with the styling I want; http://seamlessdocs-template.webflow.io/home-custom-search

The difference between the two is that both have the same ID (st-default-search-input), which I thought woudl be enough to recognize the Swiftype search field. However, it doesn’t. Only when I ue that name as the actual STYLE name, it is recognized. But when I use that and style the field, the styling is overruled by the default Swiftype styling (as shown in the first link).

---

Here is my public share link: https://preview.webflow.com/preview/seamlessdocs-template?preview=a318fc6f609ecb7e44b762b21238df07

[EvanJones]

Hey Rowan

Had a quick look at this - have you tried adding “st-search…” to the element first, then adding the “Search Field” class as a combo class (as below)?

I’m not sure if this will resolve the issue when published but it seemed to do the trick in preview

[rowan]

Nope…tried it. Seems like the default styling is overruled. Yes in preview it works

[Waldo (Waldo Broodrÿk)]

The secret @rowan is to just add the widget as an embed HTML element (copied from Swiftype), and make sure that you have your classes correct in the html (don’t give the html widget a Webflow-class but instead inside the html Embed, you’ll give that the classes you styled with Webflow and then the styles will be applied). Let me know if you have any questions.

Have fun!

Waldo

[rowan]

Hi Waldo; yes this is the embed code we get from Swiftype;
But it’s mentioning their needed class name. How would I use my own created class with that embed code for the search field?