Colors

Define your store's color palette — from layout and typography to buttons, overlays, and pickup availability indicators.

Theme Editor → Theme settings → Colors

Every pixel, on brand

Color is the fastest lever you have for making a store feel like a real brand. Avante's color system is layered — a global palette for backgrounds and text, a dedicated three-color system for all interactive elements, and independent controls for overlays, gradients, and UI states. You can build a complete visual identity here without touching a line of CSS.

---

Buttons & links — your brand, every click

The Buttons and links section controls every interactive element on the storefront. Three colors do all the work:

• Base — text color on Solid style buttons (usually white or a dark neutral)
• Accent — the main brand color. Appears as the background of Solid buttons, the outline and text of Outlined buttons, and the accent highlight across the UI
• Hover — what the button looks like when customers mouse over it

A tight relationship between Accent and Hover (e.g. one shade darker or lighter) feels polished. A dramatic shift (e.g. black to brand red) creates high energy. Either works — the key is consistency.

Accent is the most important color in the theme. It propagates automatically to star ratings, swatch outlines, selected filter tags, and other UI highlights. Set it once and the whole store stays coherent.

---

Accent headings & secondary text

Enable accent color for headings changes all H1–H4 headings across the store to your Accent color. It's a one-toggle way to push your brand color further into the layout — especially effective when your Accent is a strong, distinctive hue and your body text is neutral.

Dim secondary text slightly reduces the brightness of secondary text elements (captions, labels, helper text). Useful when your Text color is very dark and secondary elements are visually competing with primary content.

---

Overlay — set the mood for drawers and modals

The overlay appears behind the cart drawer, menu drawer, and any modal window. It focuses attention on the drawer and signals "this is a separate context."

Setting	Effect
Color	Tint of the backdrop — usually black or a brand dark
Opacity	40–60% is a common range; lower = softer, higher = more focused
Background blur	Frosted-glass effect behind the overlay. Set to 8–16px for a premium look

Background blur is a design detail that communicates quality without being obvious. It's widely used in luxury fashion and beauty stores. Set it to 0 if you want a clean, flat overlay.

---

Popup background — make dropdowns feel native

The Popup background color applies to search panels, dropdown menus, and modal windows. When set to a color close to your page background, these elements appear to float organically from the page rather than look like foreign UI.

• Light store → use near-white (#f9f9f9) or the same as your Background
• Dark store → use a slightly lighter shade of your Background (e.g. #1a1a1a on a #121212 base)

---

Compare-at price — control how sale prices look

The Compare-at price color setting controls how the original (struck-through) price is displayed next to a sale price. Three options:

• Sale badge text — matches the text color of your sale badge (automatic, no extra setup)
• Sale badge background — matches the background color of your sale badge (bold, high-contrast)
• Custom — set any hex color for full control

For most stores, the Sale badge text option creates the most coherent look since it ties the struck price visually to the badge.

---

Pro tip: Enable Use accent color for text selection in the Extra section. When customers select text on your store, the highlight uses your brand color instead of the browser default blue. A tiny detail — but it shows up everywhere, and it signals that every interaction was considered.

---

Pickup availability

Colors for the store pickup availability indicators shown on product cards and product pages. Requires Store Selector to be configured.

Setting	Description
Available text	Text color for "Available at [store]" labels.
Available icon	Color of the availability indicator dot when the product is available.
Out of stock text	Text color when the product is unavailable at the selected location.
Out of stock icon	Color of the indicator dot when the product is unavailable.