Skip to main content

Integrate search on category and landing pages

Use this guide to add Zoovu Search to category and landing pages on your website. You can tailor the experience by using a query or breadcrumb configuration and specifying where results appear.

Step 1: Publish the search configuration​

Before embedding search on any page, publish your configuration:

  1. Go to Search Studio > Design & Publish > Advanced > Plugin Configuration.
  2. Click Publish to generate the latest code snippet.
  3. Copy and embed the snippet into your website’s HTML.

Publish

Changes made after publishing are saved as drafts. Click Publish again to apply them.

Step 2: Add Zoovu Search to category or landing pages​

You can reuse your main configuration to show filtered or navigational search results on specific pages. These page-level configurations are independent but inherit the published design and logic.

Choose one of the following options:

  • query – Use this to display results for a keyword or filter set (recommended for landing pages).
  • breadcrumb – Use this to show results based on the product category path (recommended for category pages).

Example 1: Show products from a specific brand​

This example returns all products from the Microsoft brand and places the results inside the element with ID landing-page-content.

<script id="zoovu-search-landing-page-config" type="application/json">
{
    "query": "*",
    "results": {
        "filters": [
            {
                "name": "Brand",
                "type": "products",
                "values": [{ "name": "Microsoft" }]
            }
        ],
        "embedConfig": {
            "contentBlock": "#landing-page-content"
        }
    }
}
</script>

Example 2: Show products from a specific category​

This example loads products from the Notebooks > Accessories category into the element with ID category-page-content.

<script id="zoovu-search-landing-page-config" type="application/json">
{
    "breadcrumb": ["Notebooks", "Accessories"],
    "results": {
        "embedConfig": {
            "contentBlock": "#category-page-content"
        }
    }
}
</script>

Customize the search configuration​

You can use any setting available in the standard configuration, including:

  • filters – Apply filters for brand, category, attributes etc.
  • embedConfig – Control where and how results appear (e.g. contentBlock, layout, or loadingMode).
  • sorting – Define how to sort results, (e.g. by relevance or price).

The script tag must use id="zoovu-search-landing-page-config" and include a valid JSON object.

See Search plugin settings for the full list of available options.