Display Available Color Options

Colour Pills: Display the Available Color Options For A Specific Product.

A clear presentation of color options at the search stage can be an absolute time-saver for the customer. Customers can quickly identify whether the desired product is available in their preferred color without having to click through multiple pages.

Look at the Product Card example below:

Colour Pills Display Available Color Options For A Specific Product

You can display available colours in your Product Card, following those steps:

1. Index An Attribute With The Different Colours Values.

Values must be indexed as HEX colour code.

  • Example:
 "colours": "#014BA0,#7B00AC,#BAE8BC,#E84D8B,#EC7A6C"

2. Modify Your Product Card Template.

Here is the snippet you need to insert within your Product Card Template:

<%= if has_value?(@item, "colours") do %>
    <div class="dfd-card-colours">
        <%= for colour <- String.split(@item["colours"],",", parts: 3) do %>
          <span style={ "background: #{colour};"}><%= colour %></span>
        <% end %>
 <% end %>

3. Modify Your CSS.

Below you will find the CSS code you need to use to get the desired result:

/* CSS for colours pills */
.dfd-card-colours > span:nth-child(6) {
    visibility: hidden;
    position: relative;

.dfd-card-colours > span:nth-child(6):after {
    visibility: visible;
    position: absolute;
    top: -4px;
    left: 0;
    content: "(+)";
    text-indent: initial;

.dfd-card-colours span {
    margin-bottom: 6px;  
    border-radius: 50px;
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    text-indent: -100000px;