Appearance

Navigation hover, button radius, UI radius and product card behaviour — the shape of every interactive element.

The Appearance category groups visual defaults that don't fit Colors or Typography: nav hover style, border radii, and how product cards display imagery, vendor and swatches.

Theme editor → gear icon (⚙) at bottom-left → Appearance.

• Menu link hover style — Pill (background fill) or Underline (slide-in underline).

• Button/input border radius (0–50 px, default 20 px).
• UI elements border radius (0–24 px, default 8 px). Controls dropdowns, submenus, search box and other popups.

• Enable border card — toggles a visible card outline.
• Show vendor — display vendor above the product title.
• Show secondary image on hover — swap to the second product image on hover.
• Color type — None / Variant image / Color swatch (chips below the card).
• Swatch shape — Circle / Rounded square / Square.
• Product image size — Square 1:1 / Adapt to image / Portrait 2:3.
• Media fit — Fill (cover) / Contain (no crop).
• Image border radius (0–40 px).
• Card border radius (0–40 px).

Keep button radius ≥ UI radius for a consistent visual hierarchy — CTAs feel softer/larger than inputs and popups. A common ratio: button 20 px, UI 8 px.