Shopify+ Algolia, match my instant search with my collection page

Hi there,
This is what my instance page look like:

And this is my collection pages:

I read this guide and in its basic configurations in CSS selector I’ve done what it told and I change the default class to what I wanted but nothing change to what I expected to be.

Based on my needs I want our buttons and fonts and the colors and other UI’s stuff in instance search page match the collection page picture.

In which part of file/link should I change these CSS things in Shopify to get my best result?
should I link the collection CSS page to my instance page?

Or is there another way solve this ?


The file you need to change to adapt the CSS of your instant search integration in Shopify is
snippet/algolia_instant_search.css.hogan.liquid; see for documentation: InstantSearch | Shopify | Algolia Documentation

Please let us know how this goes!

Hi Jerome,
thanks for your help
I will share with you the result.

1 Like

I am going to change the default phrases and words and adding some buttons to my instance search.
Can I change them ?? If I can in which file should I do these changes.
“snippet/algolia_instant_search.css.hogan.liquid” there was not any information for changing these kind of things.


Which texts specifically do you want to change ?
You can find some guidance in our documentation on how to customize your collection.

Please let us know,