Overview

This article will walk you through creating, customizing, and optimizing button panels to match your store's unique workflow.

1. Understanding Button Panel Controls

Button Panel Controls are customizable grids of buttons that:

• Execute POS commands (e.g., apply discounts, open cash drawer)

• Improve efficiency by reducing menu navigation

• Support branding through customizable colors and icons

2. Creating a New Button Panel

2.1 Accessing the Button Panel Editor

1. Navigate to Home > Retail > POS Interface & Controls > Button Panel Control

2. Click Add Button Panel Control

2.2 Basic Configuration

3. Customizing Button Properties

3.1 General Settings

• POS Command: Assign actions (e.g., "Apply 10% Discount")

• Shortcut Key: Map to keyboard shortcuts (F1-F12)

• Button Colors:

• Background: Use brand colors

• Border: 2px solid for visibility

3.2 Advanced Styling

• CSS Classes: Apply custom animations/hover effects

• Button States: Different colors for active/inactive buttons

.btn-primary {

  transition: all 0.3s ease;

}

.btn-primary:hover {

  transform: scale(1.05);

}

3.3 Icon and Image Configuration

• Upload Custom Icons: PNG/SVG format recommended

• Positioning:

• Icon-only (for experienced staff)

• Icon + text (for training purposes)

4. Organizing Button Layout

4.1 Logical Grouping

4.2 Merging Cells

• Create larger buttons for critical functions

• Example: Merge 2×2 cells for "Emergency Cash Out"

5. Testing and Optimization

5.1 Validation Checklist

1. All buttons trigger correct commands

2. Colors meet accessibility standards (WCAG 2.1)

3. Touch targets ≥ 48×48px for tablet use

5.2 Performance Tips

• Limit to 16-20 buttons per panel

• Use tooltips for less common functions

• Regularly update with seasonal promotions

6. Troubleshooting

Here’s a quick look at some common issues you might run into.

Pro Tip: Create duplicate panels for different departments (e.g., separate panels for checkout vs inventory management).