Customizing Icon Display #
Requires Junior license or higher.
PetMatchPro gives you control over how many icons and overlays display, where overlays are positioned, what text appears in tooltips, and what colors icons use.
Icon Settings #
Search Icons #
| Setting | Location | Description |
|---|---|---|
| Enable Search Icons | General Options | Turn icons on/off for search result cards |
| Search Icons Max | General Options | Maximum number of icons per animal in search results (1-10) |
Detail Icons #
| Setting | Location | Description |
|---|---|---|
| Enable Detail Icons | General Options | Turn icons on/off for detail pages |
| Detail Icons Max | General Options | Maximum number of icons on the detail page (1-10) |
Overlay Settings #
| Setting | Description | Options |
|---|---|---|
| Enable Search Overlays | Turn overlays on/off for search results | Yes / No |
| Enable Detail Overlays | Turn overlays on/off for detail pages | Yes / No |
| Max Overlays | Maximum overlays per photo | 1-10 |
| Overlay Position | Where overlays appear on the photo | 1-8 (see positions table below) |
| Overlay Title Source | What text shows in the overlay tooltip | name or label |
Overlay Positions #
| Position | Location |
|---|---|
| 1 | Top-Left |
| 2 | Top-Center |
| 3 | Top-Right |
| 4 | Middle-Right |
| 5 | Bottom-Right |
| 6 | Bottom-Center |
| 7 | Bottom-Left |
| 8 | Middle-Left |
Overlay Title Source #
The title source controls what visitors see when they hover over an overlay:
name(default) – Uses the animal’s name: “Buddy is Spayed/Neutered”label– Uses the icon label only: “Spayed/Neutered”
Shortcode Overrides #
You can override admin settings on a per-page basis using shortcode parameters:
[pmp-search type="adopt" icon="enable" icons="4" overlay="enable" overlays="3" overlay_position="3"][pmp-details icon="enable" icons="6" overlay="enable" overlays="4" overlay_position="1"]Overlay Filter #
Limit which icons appear as overlays by specifying field names. Values must match the partner’s API field name, not a friendly label – see the field-name table in Understanding Overlays.
Example for an AnimalsFirst site:
[pmp-search type="adopt" overlay="enable" overlay_filter="altered,good_with_cats,good_with_dogs"]Only icons matching the listed fields will appear as overlays.
Icon Colors #
Icon and overlay colors are configured in the Colors tab:
- Go to PetMatchPro > Colors.
- Find the icon and overlay color fields.
- Enter hex color codes.
- Click Save Colors.
PetMatchPro generates CSS custom properties for icon colors (e.g., --pmp-icon-color), so changes apply across all templates automatically.
Recommended Settings #
| Context | Icons Max | Overlays Max | Position |
|---|---|---|---|
| Search results | 4-6 | 2-3 | 3 (Top-Right) |
| Detail pages | 8-10 | 3-5 | 1 (Top-Left) |
These are suggestions – adjust based on your templates and how much information you want to display at a glance.
Next Steps #
- Value-Based Icons – Automatic icon matching from field values
- Icon Reference Gallery – Browse all 120+ icons
- Color Customization – Full color settings guide
