Fluent Commerce Logo
Docs
Help & Feedback
Sign In

Add colours to statuses to highlight important information

Essential knowledge

Author:

Fluent Commerce

Changed on:

16 May 2024

Overview

This document provides an overview of enhancing visual representation within a system by displaying coloured dots. These dots serve as a quick reference to different statuses of orders or items, making it easier to recognize and prioritize tasks at a glance. You will learn how to customize the appearance of these dots by changing their colour through hex codes and understand the default settings. The guide also includes recommendations for a colour palette to optimize the utility of status indicators.

Key points

  • Feature Benefits: Utilize colourful dots to easily identify and prioritize different statuses.
  • Status Color Palette: Use recommended hex codes to customize dot colours for optimal status indication.
  • Configuration Guide: Follow step-by-step instructions to implement coloured status dots in your system. notify and prioritize different statuses.
  • Default Settings: The system defaults to a grey colour for statuses that are not configured, ensuring consistency across various status indicators.
  • Customization: Hex codes allow for full customization of dot colours to match your company's branding or to signify specific statuses.
  • Visual Prioritization: Assign colours to statuses based on the level of urgency or importance, aiding in quick decision-making.
  • Colour System Best Practices: Refer to the detailed best practices in the Colour section to effectively apply theming and enhance user experience.


No alt provided

Feature Benefits

  • Highlight your statuses with colourful dots to focus on what matters most.
  • Configure Status Dots as you like by changing the hex code in settings.
  • Default grey colour for non-configurable statuses to preserve the same structure if you want to skip a configuration for some values.

Status Color Palette

Recommended colours and their code values that can be used to highlight statuses are defined in the image below. We advise splitting status values according to the required attention. Green in the picture means that the order has been successfully processed and doesn’t require any urgent actions. Red can signal that the order needs attention.

Detailed Colour system best practices and theming information are available in Colour.

No alt provided

Follow the Configuration Guide to add the functionality.

Related content

Colored Thresholds for Gauge Charts Configuration
Edited 287 days ago
Fluent Commerce

Fluent Commerce

Building Blocks
Building Blocks
Packages & Modules
UI Components
Workflows
Settings
Interface Contracts
Rules
By Type
All Types
Knowledge Tracks
Extend Knowledge
Glossary
How-to Guides
Sitemap
Topics
Use Cases
Helpful Resources
Platform Limits
Support Policy
Service Level Agreement (SLA) - Enterprise
Deprecation Policy
Extend Knowledge Content – Terms and Conditions
System and Organization Controls (SOC) 3 Report
Data Privacy Addendum
Security Policy
Quick Links
For Partners
Customer Resources
Webinars and Events
eLearning

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo