• Guides
  • API Reference API
  • Integrations
  • FAQ

Algolia Guides

Become an Algolia expert. Get answers about what it can do for you and understand how it works.

Home

Getting started

Sending and managing data

Managing results

Building Search UI

Building Search UI

Building Search UI

Building Search UI

Building Search UI

Building Search UI

Getting insights and analytics

Personalization

A/B Testing

Algolia AI

Going to production

Scaling

Security

Solutions

API Clients

PHP

Ruby

JavaScript

Python

Swift

Kotlin

Android

.NET

Java

Golang

Scala

UI Widgets

InstantSearch.js

React InstantSearch

Vue InstantSearch

Angular InstantSearch

InstantSearch iOS

InstantSearch Android

Autocomplete

Tools

Crawler Configuration API

API Parameters

Index settings and search parameters

REST API

A full reference of API Endpoints

Algolia Integrations

Discover how to integrate Algolia's technology into popular frameworks and platforms, and the tools we provide to enhance your Algolia experience.

Frameworks

Rails

Symfony

Django

Laravel

Tools

Crawler

Platforms

Magento 2

WordPress

Shopify

Salesforce Commerce Cloud B2C

Netlify

Can I use Contentful with Algolia? Can I use DoubleClick for Publisher (DFP) with Algolia? Can I use Gatsby with Algolia? Can I use Algolia in my JAMstack application? Can I add new features directly to my old plan? Can I continue to renew my legacy plan contract with the same terms? Can I test my implementation in a sandbox environment? Can I use my Algolia account with multiple domains, sites, or applications? Do I need to display the Algolia logo when on a free plan? Does Algolia offer free plans for open source and non-profit projects?
See more FAQ
  • Home
  • API Reference
    • API Methods
    • API Parameters
    • REST API
    • API Clients
      • PHP
      • Ruby
      • JavaScript
      • Python
      • Swift
      • Kotlin
      • Android
      • .NET
      • Java
      • Golang
      • Scala
    • UI Widgets
      • InstantSearch.js
      • React InstantSearch
      • Vue InstantSearch
      • Angular InstantSearch
      • InstantSearch iOS
      • InstantSearch Android
  • Integrations
    • Frameworks
      • Rails
      • Symfony
      • Django
      • Laravel
    • Platforms
      • Magento 2
      • WordPress
      • Shopify
      • Salesforce Commerce Cloud B2C
      • Netlify
  • FAQ
  • Getting started
    • What is Algolia?
    • How Algolia works
      • In depth
        • Algolia's ecosystem
        • Algolia's features
        • Implementation process
        • What does Algolia do?
    • Quick start
      • Tutorials
      • Tracking usage and performance with the dashboard
      • Building a voice to text search
      • Get started using the dashboard
      • Quick start with the Android API client
      • Quick start with the PHP API client
      • Quick start with the Ruby API client
      • Quick start with the JavaScript API client
      • Quick start with the Python API client
      • Quick start with the Swift API client
      • Quick start with the Kotlin API client
      • Quick start with the .NET API client
      • Quick start with the Java API client
      • Quick start with the Go API client
      • Quick start with the Scala API client
  • Sending and managing data
    • Format and structure your data
      • How to
        • Setting searchable attributes
        • Reducing record size
        • Handling data relationships
        • Indexing long documents
      • In depth
        • Preparing your data for indexing
        • Choosing between one or more indices
        • What is in a record
        • Data sanitization
        • Data, record size, and usage limits
    • Send and update your data
      • How to
        • Importing from the dashboard
        • Importing with the API
        • Incremental updates
        • Sending records in batches
      • In depth
        • Different synchronization strategies
        • Index operations are asynchronous
        • Handling concurrency with versioning
      • Tutorials
        • Searching Firebase Realtime Database
        • Search Parse.com data
        • Search Salesforce data
        • Searching Confluence data
        • Searching Google Drive
        • Search Jira data
    • Manage your indices
      • How to
        • Export an Algolia index
        • Delete multiple indices
      • Tutorials
        • Generate a sitemap from an Algolia index
    • Manage your application environment
  • Managing results
    • Relevance overview
      • In depth
        • The 8 ranking criteria
        • Defining relevance
        • Finding records
    • Must do
      • Searchable attributes
        • How to
          • Configuring searchable attributes the right way
      • Custom ranking
        • How to
          • Create custom ranking attributes
          • Boosting or penalizing records
          • Controlling precision of custom ranking metrics
          • Enrich your records with Google Analytics data
    • Refine results
      • Sorting results
        • How to
          • Sort by attribute
          • Sort an index by date
          • Sort an index alphabetically
          • Create a replica index
          • Search in a replica index
          • Delete a replica index
          • Forward settings to replicas
          • The sortBy UI widget
        • In depth
          • Exhaustive Sorting
          • Relevant Sorting
          • Understanding replicas
          • What is the effect of a replica on the number of records?
      • Filtering
        • How to
          • Filter by string
          • Filter by numeric value
          • Filter by boolean
          • Filter by date
          • Filter an array
          • Filter by null or missing attributes
          • Filter by tags
        • In depth
          • Filters and boolean operators
          • Filter scoring
          • Filters and facet filters
      • Faceting
        • How to
          • How to declare attributes for faceting
      • Grouping results
        • How to
          • How to group results
          • Item variations
      • Geo location
        • How to
          • Filter results around a location
          • Filter results inside a rectangle
          • Filter results inside a polygon
          • Geo ranking info
          • How to solve the 180th meridian issue
        • In depth
          • Geo ranking precision
    • Rules
      • Rules Overview
        • How to
          • Using conditionless Rules
          • Adding default search parameters with Rules
          • Using Rules to customize search results by platform
        • In depth
          • Implementing Rules
          • Rule matching algorithm
          • Debugging Rules
      • Detecting intent
        • How to
          • Adding filters based on the query
          • Dynamic filtering with Rules
          • Adding search parameters dynamically
          • Detecting keywords
          • Replacing an entire query
      • Merchandising and promoting items
        • How to
          • Promoting hits
          • Hiding results with Rules
          • Optional filters
          • Adding banners
          • Merchandising on empty queries
          • Combining multiple consequences
          • Merchandising category pages
          • How to configure and use the Visual Editor with category pages?
        • In depth
          • Optional filters
    • Optimize search results
      • Synonyms
        • How to
          • Managing synonyms from the dashboard
        • In depth
          • Regular synonyms
          • One way synonyms
          • Alternate correction synonyms
          • Synonym placeholders
      • Typo tolerance
        • How to
          • Preventing typosquatting
          • Searching in hyphenated attributes
        • In depth
          • Configuring typo tolerance
      • Handling natural languages
        • How to
          • Multilingual search
          • Set an index's query language
          • Customize stop words
          • Customize plurals and other declensions
          • Customize word segmentation
        • In depth
          • Language-specific configurations
          • Normalization
          • Tokenization
          • Splitting and concatenation
      • Empty or insufficient results
        • In depth
          • Removing words to improve results
      • Improve results with analytics
      • Override engine defaults
        • How to
          • Querying in the middle of a word
        • In depth
          • Prefix searching
          • Adjusting the exact criterion
      • Troubleshooting relevance
  • Building Search UI
    • What is InstantSearch Android?
    • What is Angular InstantSearch?
    • What is InstantSearch iOS?
    • What is InstantSearch.js?
    • What is React InstantSearch?
    • What is Vue InstantSearch?
    • Getting started
    • Getting started
    • Getting started
    • Getting started
    • Getting started
    • Getting started
    • Installation
    • Installation
    • Installation
    • Installation
    • Installation
    • Installation
    • Upgrade guide for InstantSearch Android
    • Upgrade guides
    • Upgrade guide for InstantSearch iOS
    • Upgrade guides
    • Upgrade guides
    • Upgrade guides
    • Widgets
      • Widgets showcase
      • Widgets showcase
      • Widgets showcase
      • Widgets showcase
      • Widgets showcase
      • Widgets showcase
      • Customize an existing widget
      • Customize an existing widget
      • Customize an existing widget
      • Customize an existing widget
      • Customize an existing widget
      • Customize an existing widget
      • Create your own widgets
      • Create your own widgets
      • Create your own widgets
      • Create your own widgets
      • Create your own widgets
      • Create your own widgets
    • UI & UX patterns
      • Autocomplete
      • Autocomplete
      • Autocomplete
      • Autocomplete
      • Autocomplete
      • Autocomplete
      • Multi index search
      • Multi index search
      • Multi index search
      • Multi index search
      • Query Suggestions
      • Query Suggestions
      • Query Suggestions
      • Query Suggestions
      • Query Suggestions
      • Query Suggestions
      • Highlighting and Snippeting
      • Highlighting and Snippeting
      • Highlighting and Snippeting
      • Highlighting and Snippeting
      • Highlighting and Snippeting
      • Highlighting and Snippeting
      • Pagination
      • Pagination
      • Pagination
      • Pagination
      • Pagination
      • Pagination
      • Infinite scroll
      • Infinite scroll
      • Infinite scroll
      • Infinite scroll
      • Infinite scroll
      • Infinite scroll
      • Geo search
      • Geo search
      • Geo search
      • Geo search
      • Geo search
      • Geo search
      • Algolia Places
      • Algolia Places
      • Algolia Places
      • Algolia Places
      • Algolia Places
      • Algolia Places
      • OpenSearch
      • OpenSearch
      • OpenSearch
      • OpenSearch
      • Sorting refinements
      • Sorting refinements
      • Filtering patterns
      • Filtering patterns
      • Redirects
      • Redirects
      • Redirects
      • Redirects
      • Structured results
      • Structured results
      • Structured results
      • Structured results
      • Disabling default browser behavior on search inputs
      • Disabling default browser behavior on search inputs
      • Disabling default browser behavior on search inputs
      • Disabling default browser behavior on search inputs
      • Voice search
      • Voice search
    • Going further
      • Conditional display
      • Conditional display
      • Conditional display
      • Conditional display
      • Conditional display
      • Conditional display
      • Conditional requests
      • Conditional requests
      • Conditional requests
      • Conditional requests
      • API keys/security
      • API keys/security
      • API keys/security
      • API keys/security
      • API keys/security
      • API keys/security
      • Routing URLs
      • Routing URLs
      • Routing URLs
      • Routing URLs
      • Send Insights events
      • Send Insights events
      • Send Insights events
      • Send Insights events
      • Send Insights events
      • Send Insights events
      • Integrate Google Analytics
      • Integrate Google Analytics
      • Integrate Google Analytics
      • Integrate Google Analytics
      • Improve performance
      • Improve performance
      • Improve performance
      • Improve performance
      • Improve performance
      • Improve performance
      • Back-end search
      • Back-end search
      • Back-end search
      • Back-end search
      • Back-end search
      • Back-end search
      • Native
      • Native
      • Native
      • Native
      • Access state outside the lifecycle
      • Server-side rendering
      • Server-side rendering
      • Server-side rendering
      • Server-side rendering
    • Resources
      • Unified InstantSearch for E-Commerce
        • Tutorials
          • Getting started
          • Using your own data
          • Customizing your UI
          • Merchandising and Rules
      • Demos
      • Demos
      • Demos
      • Demos
      • Demos
      • Demos
      • InstantSearch Labs
      • InstantSearch Labs
      • InstantSearch Labs
      • SEO-ready search experience checklist
      • SEO-ready search experience checklist
      • SEO-ready search experience checklist
      • SEO-ready search experience checklist
    • Troubleshooting
      • FAQ
      • FAQ
      • FAQ
      • FAQ
      • FAQ
      • FAQ
  • Getting insights and analytics
    • Search analytics
      • Out-of-the-box analytics
        • How to
          • How to remove the empty search from analytics
          • How to set the analytics userToken
      • Click and Conversion Analytics
        • How to
          • Sending events with an API client
          • Sending current or older events in batches
          • Keeping track of the queryID for conversion events
        • In depth
          • Capturing user behavior as events
          • Best practices for sending events
          • How the Insights API client for JavaScript handles user identifiers
          • Validating events
      • Segmenting your analytics data
        • How to
          • Tag your users by platform
          • Tag your users by age group
          • Tag new and returning users
      • Analytic metrics and reports
        • How to
          • Connect your search with Google Analytics
    • Connectors
      • Google Tag Manager
      • Segment
        • Reference
          • Supported events
  • Personalization
    • What is Personalization?
      • In depth
        • How Personalization works
    • Personalizing results
      • How to
        • Sending events with an API client
        • Sending current or older events in batches
        • Keeping track of the queryID for conversion events
      • In depth
        • Planning which user behavior to track
        • Capturing user behavior as events
        • Best practices for sending events
        • How the Insights API client for JavaScript handles user identifiers
        • Validating events
        • Configuring Personalization
    • Going to production
      • How to
        • A/B testing Personalization
        • Enabling Personalization
      • In depth
        • Implementation checklist
  • A/B Testing
    • What is A/B testing
      • How to
        • Prepare your environment for A/B testing
        • Create and run an A/B test
      • In depth
        • Why do A/B testing?
        • How A/B test scores are calculated
  • Algolia AI
    • Dynamic Synonym Suggestions
    • Dynamic Re-Ranking
    • Algolia Answers
    • Algolia Recommend
  • Going to production
    • Preparing your project
    • Implementation checklist
    • Case study for an online clothing company
  • Scaling
    • Servers and clusters
      • How to
        • Capacity alerts
      • In depth
        • Server specs
    • Distributed Search Network (DSN)
    • Multi-Cluster Management (MCM)
      • How to
        • Implementing MCM
    • Scaling to larger datasets
  • Security
    • API keys
      • How to
        • User-restricted access to data
        • How to restore an API key
      • In depth
        • API key restrictions
    • Security best practices
      • In depth
        • Shared responsibility
    • Algolia Vault
  • Solutions
    • Overview
    • Sample Apps
    • Ecommerce
      • Autocomplete
        • Tutorials
          • Animated placeholder
          • Federated Search
          • Predictive text suggestions
      • Filtering and Navigation
        • Tutorials
          • Auto-selected facets
          • Dynamic facets positioning
          • Recommended filters
          • Visual facets
          • Facet dropdowns
          • Guided Search
      • Browse
        • Tutorials
          • Category Pages
          • Merchandising Category Pages
          • Adding Navigation and Filters to Category Pages
          • Adding AI Dynamic Re-Ranking to Category Pages
        • Magento 2
          • Magento 2 - Category Pages
          • Magento 2 - Merchandising Category Pages
        • Shopify
          • Shopify - Category Pages
          • Shopify - Merchandising Category Pages
      • Related Products
        • Tutorials
          • Similar Products
      • Search Relevance
        • Tutorials
          • Using the Bayesian average in ranking
      • Visual Image Search
        • Tutorials
          • Image classification and tagging
          • Search by image
      • Sending Events
        • Tutorials
          • Getting Started on Sending Events
          • Planning Events to Send
          • Sending Events Using API Clients
          • Sending Events Using InstantSearch
          • Validating and Debugging Events
    • Content navigation
      • Content Carousels
        • Tutorials
          • Static content carousels
          • Dynamic content carousels
      • Related Content
        • Tutorials
          • Similar Media Content
Algolia.com Dashboard
Guides / Building Search UI / Resources
Dec. 11, 2020

Demos

Edit this guide A Edit this guide
On this page
  • 1. E-commerce
  • 2. Media
  • 3. Tourism
  • 4. Default Theme

E-commerce

E-commerce demo

View demo View source code

View dataset

Media

Media demo

View demo

View source code

View dataset

Tourism

Tourism demo

View demo

View source code

Default Theme

Default theme demo

View demo

View source code

View dataset

Previous
Server-side rendering
Next
InstantSearch Labs
Chip
Start building for free today
No credit card required

Did you find this page helpful?

Looks like there's an issue on our end. Please copy the message below and send it to support@algolia.com

© Algolia - Privacy Policy

React InstantSearch v6
InstantSearch Android v2
Angular InstantSearch v3
InstantSearch iOS v7
InstantSearch.js v4
React InstantSearch v6
Vue InstantSearch v3

On this page

  • E-commerce
  • Media
  • Tourism
  • Default Theme
Support Need help?
React InstantSearch v6
InstantSearch Android v2
Angular InstantSearch v3
InstantSearch iOS v7
InstantSearch.js v4
React InstantSearch v6
Vue InstantSearch v3