WPSolr logo
  • AI RAG + ChatBot
  • AI Search
  • AI Recommendations
  • AI Personalization
  • AI Pricing
  • More >
  • AI RAG + ChatBot
  • AI Search
  • AI Recommendations
  • AI Personalization
  • AI Pricing
  • More >
  • AI RAG + ChatBot
  • AI Search
  • AI Recommendations
  • AI Personalization
  • AI Pricing
  • More >
Expand All Collapse All
  • What is WPSOLR ?
    • The standard WordPress SQL search
    • The WPSOLR search with Elasticsearch, Apache Solr, or Algolia
  • Your configuration journey, step by step
    • Install Apache Solr
    • Hosted Apache Solr and SolrCloud Services
    • Install Elasticsearch
    • Install Opensearch
    • Install Weaviate
    • Elasticsearch Hosting
    • Configure search
      • Getting started with search
      • Getting started with Ajax (live) search
      • Getting started with facets
      • 0. Connect your indexes
        • Create a Google Retail search index
        • Create a Weaviate index
          • Weaviate with sentence transformers
          • Weaviate with Google PaLM API
          • Weaviate with Hybrid search
          • Weaviate with Question Answering transformers
          • Weaviate with Cohere Multilingual API
          • Weaviate with OpenAI GPT API
          • Weaviate with HuggingFace Endpoints API
          • Weaviate with CLIP text-to-image
          • Weaviate with GPT4All
          • Weaviate with Reranker - Cohere
          • Weaviate with Reranker - Transformers (cross-encoders)
        • Create an Elasticsearch index
          • Generate a test Elasticsearch index
          • Create an Elasticsearch index
          • Create an ObjectRocket Elasticsearch index
          • Create an Aiven Elasticsearch or OpenSearch index
          • Create a Qbox Elasticsearch index
          • Create an Elastic Elasticsearch index
          • Create a Compose Elasticsearch index
          • Create a Cloudways Elasticsearch index
          • Create a Bonsai Elasticsearch index
          • Create an Amazon AWS Elasticsearch index
          • Create an ElasticPress Elasticsearch index
          • Create an Alibaba Cloud Elasticsearch index
          • Connect to an Elasticsearch index
        • Create an Apache Solr index
          • Generate a test Apache Solr index
          • Create an Apache Solr index
          • Create a SearchStax SolrCloud index
          • Create an Opensolr Solr index
          • Connect to an Apache Solr index
        • Create an Opensearch index
          • Create an Amazon AWS OpenSearch index
        • Create an Algolia index
      • 1. Activate extensions (Add-ons)
        • Theme add-on
          • Collapse taxonomy hierarchies
          • Custom Facets CSS
          • Filters layouts
            • Radiobox & Checkbox Layout
            • Numeric Range Layout
            • Colour Picker Layout
            • Range Slider Layout
            • Date Picker (Flatpickr) Layout
          • Add Ajax to the current Theme
        • WPML add-on
        • Polylang add-on
        • SEO add-ons
          • Yoast SEO add-on
          • All in One SEO add-on
        • ACF add-on
        • Toolset Types add-on
        • bbPress add-on
        • PDF Embedder add-on
        • Embed Any Document add-on
        • YITH WooCommerce Ajax Search add-on
        • MyListing add-on
        • WooCommerce add-on
        • AI Image and OCR APIs add-on
          • Google Vision
          • Amazon Rekognition
        • Listable add-on
        • Cron Scheduling add-on
        • Advanced Scoring add-on
        • AI Natural Language APIs add-on
          • Amazon Comprehend
          • Google Natural Language
          • Aylien Text Analysis
          • MeaningCloud
          • Qwam Text Analytics
        • Premium add-on
          • Manage more than one Elasticsearch or Solr index
        • Geolocation add-on
        • Cross-domain federated search add-on
        • Toolset Views add-on
        • Directory+ add-on
        • Listify add-on
        • Jobify add-on
        • Query Monitor add-on
      • 2. Define your search
        • 2.1 Search
        • 2.2 Data
        • 2.3 Boosts
        • 2.3 Suggestions (Ajax search)
      • 3. Index your data
    • Configure recommendations
      • Algolia - Recommend and Personalized search
      • Recombee - Recommendations
      • Google Retail - AI Recommendations and Personalized search
      • Amazon Personalize
    • Create your Custom Templates for Ajax Search, Related Posts & recommendations
  • Quick start

Colour Picker Layout

387 views 0 April 7, 2017 Updated on July 13, 2019

Rather than showing the texts of colours (“red”, “blue”, “green” …) in a facet, why not show an image with the color as the background ?.

The idea is to associate colours to your field values, by picking a colour with a colour picker.

Choose the layout "Colour picker"Choose the layout “Colour picker”

 

Associate colours to the facet values
Associate colours to the facet values
  1. Select the layout “Colour Picker”
  2. Open the facet values.
  3. Associate a colour with the colour picker. Do nothing if your value is already a colour, like “white”, or “#ffffff”.

 

This will generate the coloured facet :

Facet with coloured images
Facet with coloured images

Was this helpful?

Yes  No
Related Articles
  • Create your Custom Templates for Ajax Search, Related Posts & recommendations
  • Getting started with facets
  • Getting started with Ajax (live) search
  • Getting started with search
  • 3. Index your data
  • 2.3 Suggestions (Ajax search)

Didn't find your answer? Contact Us

Previously
Numeric Range Layout
Up Next
Range Slider Layout
Features
AI ChatBot and RAG
Search
Ajax search
Facets (Filters)
Search Add-ons
Recommendations
MyListing theme search
Flatsome theme search
Keyword search engines
Comparison grid
Apache Solr & Solr Cloud
Opensolr
Elasticsearch
OpenSearch
Algolia
AI search engines
Comparison grid
Weaviate
Vertex AI Search for Retail
Algolia NeuralSearchâ„¢
Vespa.ai
AI recommendation engines
Comparison grid
Vertex AI Search for Retail AI Recommendations
Algolia Recommend
Recombee Recommendations
Amazon Personalize Recommendations
AI personalization engines
Comparison grid
Vertex AI Search for Retail Personalized Search
Algolia Personalized Search
Recombee Reranking
Buy and Learn
Pricing
Affiliates
Why us?
Privacy policy
Built by Eostis
Terms and Conditions
© 2024 Eostis SARL. All Rights Reserved.
More
My licenses
Support
Documentation
Releases
Testimonials
Blog
Recommendations powered for you by WPSolr
Manage Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage {vendor_count} vendors Read more about these purposes
View preferences
{title} {title} {title}