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

Open Q&A
,
#1

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

bandicam 2021-03-02 15-15-48-468
bandicam 2021-03-02 15-15-48-4681920×894 135 KB

And this is my collection pages:

bandicam 2021-03-02 15-15-17-263
bandicam 2021-03-02 15-15-17-2631915×938 173 KB

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 ?

#2

Hi!

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!

#3

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

1 Like
#4

Hi,
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.

#5

Hi,

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,