Learn how to change the button colors on the Item Catalog element using Add Style properties.
The Item Catalog button colors default to the Primary color set in your event's Website Theme Settings. This theme color controls buttons across the entire website. If you want to change the button colors for the Item Catalog only, use its Add Style properties instead.
An example from a demonstration event.
Item Details page buttons are separate
Changes to the Item Catalog button colors do not affect the buttons on the Item Details page. To change Item Details button colors, use its Introduction To Advanced Styling property or the Theme Settings.
Button Color Properties
Select the Item Catalog element, click Add Style in the Editor sidebar, and set any of the following properties:
An example from a demonstration event.
| Property | Description |
|---|---|
| Button Background | The background color of the button in its default state. |
| Button Background on Hover | The background color when a visitor hovers their mouse over the button. |
| Button Color | The color of the button label text in its default state. |
| Button Color on Hover | The color of the button label text when a visitor hovers over the button. |
Setting Button Colors
Click any button color property to open the Color Picker for that property. Each property must be set individually. You can copy and paste a color value from one property to another as needed.
By default, a newly added button color property has no defined color and does not affect the current button appearance until a color is set.
Theme Settings vs. Add Style
Using Theme Settings to change button colors updates buttons across the entire website, including UI elements. Using Add Style on the Item Catalog changes only that element's buttons.