Skip to content

Featured Icons Documentation

Menu Location: Products > Featured Icons

Access Level: Manager and above

Last Updated: 2026-03-01

Overview

The Featured Icons page allows you to create and manage special badges and icons that appear on product listings. These visual indicators help customers quickly identify products with special attributes like "Organic," "Local," "New," "Sale," or "Gluten-Free."

Primary Functions:

  • Create custom product badges
  • Assign icons to products
  • Control badge appearance and styling
  • Manage seasonal or promotional badges
  • Highlight product attributes visually

Page Layout

Header Section

  • Page Title: "Featured Icons"
  • Create New Icon Button: Add new badge/icon
  • Active Icons Count: Number of icons currently in use

Icons List Table

Displays all existing icons with columns:

  • Icon Preview: Visual display of the badge
  • Icon Name: Internal reference name
  • Display Text: Text shown on badge
  • Icon Style: Color scheme and design
  • Products Using: Count of products with this icon
  • Active Status: Whether icon is currently displayed
  • Edit/Delete Actions: Modify or remove icon

Icon Editor

  • Icon Properties Form: Name, text, style settings
  • Preview Panel: Live preview of icon appearance
  • Product Assignment: Assign icon to specific products
  • Save/Cancel Buttons: Apply or discard changes

Create New Icon

Steps:

  1. Click "Create New Icon" button
  2. Icon creation form appears
  3. Fill in icon properties
  4. Configure display settings
  5. Preview appearance
  6. Save icon

Icon Properties

Icon Name (Required)

  • Purpose: Internal reference (admins only see this)
  • Format: Short, descriptive (e.g., "organic-badge", "new-product-label")
  • Character Limit: 50 characters
  • Example: "Gluten-Free Badge"

Display Text (Required)

  • Purpose: Text shown to customers on badge
  • Format: Short, impactful
  • Character Limit: 15 characters recommended
  • Examples:
  • "ORGANIC"
  • "NEW!"
  • "SALE"
  • "LOCAL"
  • "LIMITED"
  • "BESTSELLER"

Icon Description (Optional)

  • Purpose: Admin note about icon usage
  • Example: "Use for certified organic products only"

Icon Styling

Badge Style (Required) Select from preset styles or create custom:

Preset Styles:

  • Success/Green: Positive attributes (Organic, Fresh, Healthy)
  • Info/Blue: Informational (New, Limited, Seasonal)
  • Warning/Orange: Attention (Sale, Special Offer, Hot Deal)
  • Danger/Red: Urgency (Limited Stock, Last Chance)
  • Primary/Purple: Premium (VIP, Exclusive, Premium)
  • Secondary/Gray: Neutral (Featured, Popular)

Custom Styling:

  • Background Color: Hex code or color picker
  • Text Color: Hex code or color picker
  • Border Style: Solid, dashed, or none
  • Border Color: Hex code or color picker
  • Corner Radius: Rounded vs. square corners

Icon Shape:

  • Rectangle (most common)
  • Circle/Oval
  • Banner/Ribbon
  • Custom shape (advanced)

Icon Position on Product:

  • Top-Left (most common)
  • Top-Right
  • Bottom-Left
  • Bottom-Right
  • Over image (centered)

Icon Display Settings

Active Status

  • Checkbox: "Active" - Icon visible on customer site
  • When Unchecked: Icon hidden but preserved
  • Use Case: Seasonal icons, temporary deactivation

Display Priority

  • Purpose: When product has multiple icons, which shows first
  • Format: Number (1 = highest priority)
  • Example: "Sale" badge priority 1, "Organic" badge priority 2

Expiration Date (Optional)

  • Purpose: Automatically hide icon after date
  • Format: Date picker (YYYY-MM-DD)
  • Use Case: Promotional or seasonal badges
  • Example: "Holiday Special" badge expires Jan 2

Assigning Icons to Products

Assign to Individual Product

Method 1: From Icon Editor

  1. Create or edit icon
  2. Scroll to "Products" section
  3. Search for product by name
  4. Select product from dropdown
  5. Click "Add Product"
  6. Product now displays this icon
  7. Save icon

Method 2: From Product Edit Page

  1. Go to Products page
  2. Edit desired product
  3. Find "Featured Icons" section
  4. Select icon from dropdown
  5. Save product
  6. Icon appears on product

Assign to Multiple Products

Bulk Assignment:

  1. Create or edit icon
  2. Click "Bulk Assign" button
  3. Filter products by category, tag, or other criteria
  4. Select multiple products from list
  5. Click "Assign Icon to Selected"
  6. Confirmation shows count of products updated
  7. Save changes

Use Cases:

  • Add "Organic" icon to all organic products
  • Add "New" icon to products added this month
  • Add "Sale" icon to all discounted items

Remove Icon from Products

Individual Removal:

  1. Edit icon
  2. Find product in assigned list
  3. Click X or Remove next to product
  4. Icon removed from that product
  5. Save icon

Bulk Removal:

  1. Edit icon
  2. Click "Remove All" button (if available)
  3. Confirm action
  4. Icon removed from all products
  5. Icon itself remains for future use

Managing Icons

Editing Existing Icons

Steps:

  1. Find icon in Icons List table
  2. Click Edit button
  3. Modify properties, styling, or product assignments
  4. Preview changes
  5. Click Save Changes
  6. Changes apply immediately to all products using this icon

What You Can Edit:

  • Display text
  • Icon styling (colors, shape, position)
  • Active status
  • Product assignments
  • Expiration date

What You Cannot Change:

  • Icon ID (system-generated)

Deactivating Icons

Temporary Deactivation:

  1. Edit icon
  2. Uncheck "Active" checkbox
  3. Save icon
  4. Icon hidden from customer view
  5. Product assignments preserved
  6. Can reactivate anytime

Use Cases:

  • Seasonal icons (hide "Summer Special" in fall)
  • Ended promotions (hide "Sale" after sale ends)
  • Testing (create icon, test, activate when ready)

Deleting Icons

Permanent Deletion:

  1. Find icon in list
  2. Click Delete button
  3. System checks if icon is in use
  4. If in use, shows count of affected products
  5. Confirm deletion
  6. Icon removed from all products
  7. Icon permanently deleted

Warning: Cannot undo deletion. Consider deactivating instead.

Cloning Icons

Purpose: Create similar icon faster

Steps:

  1. Find icon to clone
  2. Click Clone button
  3. System copies all settings
  4. Modify name and display text
  5. Adjust styling if needed
  6. Save as new icon

Example: Clone "Organic" green badge to create "Non-GMO" green badge

Common Use Cases

Use Case 1: Create "Organic" Badge for Certified Products

Goal: Visually identify all certified organic products

Steps:

  1. Click Create New Icon
  2. Icon Name: "Organic Badge"
  3. Display Text: "ORGANIC"
  4. Badge Style: Success/Green
  5. Icon Position: Top-Left
  6. Set as Active
  7. Save icon
  8. Go to Products page
  9. Filter products by "Organic" category or tag
  10. Export product list
  11. Return to Featured Icons
  12. Use Bulk Assign to add icon to all organic products
  13. Verify icons appear on customer site

Result: All organic products display green "ORGANIC" badge

Use Case 2: Temporary "Sale" Badge for Weekly Promotion

Goal: Highlight products on sale this week

Steps:

  1. Create New Icon
  2. Icon Name: "Weekly Sale Badge"
  3. Display Text: "SALE"
  4. Badge Style: Warning/Orange
  5. Priority: 1 (shows first if multiple icons)
  6. Set Expiration Date: End of sale week
  7. Save icon
  8. Assign to all products currently on sale
  9. Icon automatically disappears after expiration date
  10. No need to manually remove

Result: Sale products prominently marked, badge auto-expires

Use Case 3: "New Product" Badge for Recent Additions

Goal: Highlight products added in last 30 days

Steps:

  1. Create New Icon
  2. Icon Name: "New Product Badge"
  3. Display Text: "NEW!"
  4. Badge Style: Info/Blue
  5. Icon Position: Top-Right
  6. Set Expiration: 30 days from today
  7. Save icon
  8. Filter products by creation date (last 30 days)
  9. Bulk assign icon to new products
  10. Set reminder to add to future new products
  11. Or automate if system supports

Result: New products stand out, badge expires after 30 days

Use Case 4: "Local" Badge for Regional Products

Goal: Identify locally-sourced products

Steps:

  1. Create New Icon
  2. Icon Name: "Local Badge"
  3. Display Text: "LOCAL"
  4. Badge Style: Primary/Purple
  5. Icon Position: Top-Left
  6. Priority: 2 (after sale badges)
  7. Save and activate
  8. Assign to products sourced from local farms
  9. Update as local products change seasonally

Result: Customers easily find local products

Use Case 5: Multiple Icons for High-Value Product

Goal: Product that's organic, local, AND new

Steps:

  1. Product already has "Organic" icon (priority 3)
  2. Assign "Local" icon to product (priority 2)
  3. Assign "New" icon to product (priority 1)
  4. Customer sees primary icon based on priority
  5. Or configure to show multiple icons if system supports
  6. Preview to ensure not cluttered

Result: Product badges highlight multiple selling points

Troubleshooting

Icon Not Appearing on Product

Symptoms:

  • Icon assigned but not showing on customer site
  • Icon shows in admin but not frontend

Check:

  1. Is icon marked as "Active"?
  2. Is product marked as "Active"?
  3. Has icon expired (check expiration date)?
  4. Is product image displaying correctly?
  5. Clear cache and check again

Solutions:

  1. Edit icon, enable Active status
  2. Edit product, ensure active
  3. Remove or extend expiration date
  4. Refresh product images
  5. Clear site cache, wait 5-10 minutes

Icon Styling Looks Wrong

Symptoms:

  • Colors not displaying correctly
  • Icon position off
  • Text truncated or overlapping

Check:

  1. Is display text too long (over 15 characters)?
  2. Are custom colors valid hex codes?
  3. Is icon shape appropriate for text length?
  4. Does styling work on mobile devices?

Solutions:

  1. Shorten display text
  2. Use color picker instead of manual hex entry
  3. Try rectangle shape for longer text
  4. Preview on mobile before saving

Multiple Icons Overlap on Product

Symptoms:

  • Icons cover each other
  • Can't read text on icons
  • Visual clutter

Check:

  1. How many icons assigned to product?
  2. What are icon positions (all top-left)?
  3. What are display priorities?

Solutions:

  1. Limit to 1-2 icons per product (best practice)
  2. Use different positions (top-left, top-right)
  3. Adjust priorities so highest shows first
  4. Remove lower-priority icons from this product

Bulk Assignment Not Working

Symptoms:

  • Bulk assign button doesn't work
  • Some products not receiving icon
  • Error during bulk assignment

Check:

  1. Are products active?
  2. Do products have images?
  3. Is icon active?
  4. Do you have proper permissions?

Solutions:

  1. Filter for active products only before bulk assign
  2. Ensure products have images uploaded
  3. Activate icon before assigning
  4. Verify Manager or Admin access
  5. Try smaller batches if large dataset
  • Products - Assign icons to individual products
  • Featured Products Sort - Icons help in featured product display
  • Create New Box - Box products may display icons
  • Categories - Filter products by category for bulk icon assignment

Typical Workflow:

  1. Create icon(s) for common attributes
  2. Assign to relevant products (individually or bulk)
  3. Monitor customer response
  4. Update or create new icons seasonally
  5. Deactivate or delete unused icons

Permissions & Access

Required Access Level: Manager or higher

Access Level Capabilities:

  • Manager: Create, edit, delete icons; assign to products
  • Administrator: All Manager capabilities + advanced styling
  • Kiva Admin: All features + technical settings

Restricted Features:

  • Customer Service cannot access this page
  • Only Manager and above can create/edit icons

Best Practices

Icon Design

  1. Keep text short - 1-2 words maximum (e.g., "ORGANIC" not "Certified Organic Product")
  2. Use contrasting colors - Ensure text readable on background
  3. Consistent styling - Similar design across all icons
  4. Standard positions - Top-left for most, top-right for "New"
  5. Test on mobile - Ensure icons visible on small screens

Icon Strategy

  1. Limit icon types - 5-10 different icons max (avoid confusion)
  2. Clear meanings - "Sale," "New," "Organic" are universally understood
  3. Priority system - Most important icons display first
  4. Regular audits - Remove unused or outdated icons
  5. Seasonal rotation - Update icons for seasons/holidays

Product Assignment

  1. Don't over-icon - 1-2 icons per product maximum
  2. Meaningful badges - Only add if truly applies
  3. Bulk efficiency - Use bulk assign for categories
  4. Update regularly - Remove "New" after 30 days, "Sale" after promotion
  5. Verify accuracy - "Organic" only on certified products

Performance

  1. Optimize icon images - Keep file size small for fast load
  2. Cache-friendly - Icons should cache well
  3. Don't overuse - Too many iconned products = none stand out
  4. Regular cleanup - Delete unused icons
  5. Monitor load times - Ensure icons don't slow page

Things to Avoid

  • Don't use icons that are confusing or misleading
  • Don't create too many similar icons (e.g., "Sale" and "On Sale" and "Discounted")
  • Don't forget to deactivate expired promotional icons
  • Don't use icons as primary product information (also include in description)
  • Don't make icons too large (distracting) or too small (unreadable)

Quick Reference Card

Task Action/Location
Create new icon Click "Create New Icon" button
Edit existing icon Find icon in list, click Edit
Change icon text Edit icon > Display Text field
Change icon color Edit icon > Badge Style or Custom Styling
Assign icon to product Edit icon > Add Product or edit product directly
Bulk assign icon Edit icon > Bulk Assign button
Deactivate icon Edit icon > Uncheck Active > Save
Delete icon Find in list > Delete button > Confirm
Set icon priority Edit icon > Display Priority field
Set expiration Edit icon > Expiration Date field

FAQs

How many icons can I assign to one product?

Technically unlimited, but best practice is 1-2 icons maximum. More than 2 creates visual clutter and dilutes impact.

Can icons be animated or interactive?

Most systems support static icons only. Animated or interactive badges may require custom development.

Do icons affect search or filtering?

Icons are primarily visual. However, the attributes they represent (organic, sale, etc.) should be searchable through product tags or categories.

Can customers filter products by icon?

This depends on your system. Some allow filtering by icon (e.g., "Show only products with Organic badge"). Check your system capabilities.

What's the difference between an icon and a product tag?

  • Icon: Visual badge customers see on product images
  • Tag: Data attribute for filtering/categorization (admin-side)
  • Best Practice: Use both - tag for filtering, icon for visual

Should I create separate icons for different colors of the same attribute?

No, maintain consistency. One "Organic" icon in green is better than multiple variations. Consistency aids customer recognition.

How do I know if an icon is effective?

Track:

  • Click-through rate on iconned vs. non-iconned products
  • Sales of products before and after icon addition
  • Customer feedback
  • A/B testing with/without icons

Can I use custom images instead of text badges?

Some systems allow custom icon images. Upload small PNG/SVG files for logos or custom graphics. Check system capabilities.

What if my icon text doesn't fit?

  • Shorten text (use abbreviations if clear)
  • Increase icon size (if allowed)
  • Use symbol/emoji instead of text
  • Adjust font size in styling

Do I need separate "Sale" icons for different discount amounts?

No, use one "SALE" icon. Display specific discount (e.g., "20% OFF") in product pricing or description, not on icon.

Change Log

2026-03-01

  • Initial documentation created
  • All sections completed following template structure

End of Documentation

For additional help, contact your system administrator or Kiva Logic support.