Create sections on searchpage


In the default listing all products, posts and pages are listed randomly togehter. I would like to create sections like:

Product 1
Product 2

Post 1
Post 2

Page 1
Page 2

How do I accomplish this? I have checked through the documentation on and several other snippets but I cannot find on how to create sections of the sort I need.

Is there any docs on this?

Best regards.

Hi @damir can you show me a live example of such behaviour so I can better understand what you mean? You can use this ready to modify template to create a small example of your use case:

Hi @vvo, thank you for a quick reply.

Here is a testing site --> as you see here I I ahve 2 Post Types (Produkter and Inlegg), which are in english Products and Posts from the blog.

if you scroll down the page you can see that I have managed through some coding (not good) to partly section the searches but this code I have done is not good in the long term, I am in the testing fase in figuring it out.

So basically if there is a filter of some sort for me to display Products and Posts in separate containers it would help alot.

I cheked out your link with the brands refine list but I did manage to get it in teh way I wanted.

Do you have any suggestions?

Hi @damir thanks for the demo and explanations, to clarify: you want to display two set of results of the same size and have a single search box controlling both results.

If that’s the case, let me know and I’ll see how we can do that effectively.

Hi, yes that is correct! But, I found a solution here -->
Is there a better way for doing this I am listening. :slight_smile:

That’s exactly what I was gonna suggest to you, this example can actually be used to target a single index but two times and apply a filter manually to search only in type X or Y.

Let me know how it goes.

Oh okay, can you show me an example of that? Would be nice :smiley:

Since you have a single index, there’s a more efficient and easier way to achieve what you want, but first, a demo:

This demo shows two type of hits in a split display, here’s how:

  • every hit has a “type” attribute that is either “one” or “two”
  • the Algolia index has the “attributeForDistinct” setting set to the “type” attribute (this is distinct for grouping). You can configure this in your dashboard by going to Index > Display > Attribute for distinct
  • query time hitsPerPage attribute is set to 2 (so we get two groups max)
  • query time distinct attribute is set to 10 (so we get 10 hits of each type max)

Let me know what you think.

I will test it out. But I have a another small quick question. I followed this discussion Wordpress Plugin only indexing 150x150 Image and I got the shop_catalog image to be indexed in Algolia administration, I can see it in there, but on the website the shop_catalog size isn’t visible in the output. How do make the image viewable on the website serach page like the default thumbnail image?

@damir Can you reply to this previous topic or open a new one? So that we keep our discussion here focused, thanks!