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:
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 %>
</div>
<% 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;
}
If you use our plugin, consider using a custom data feed or API to export these attributes.