---
title: "Colours and fonts"
description: "Use the visual customizer to match your store locator's font, colours, and corner style to your brand, with a live preview."
product: "Shoppy Store Locator"
section: "Settings and design"
url: https://help.shoppyconnect.com/store-locator/settings-and-design/colours-and-fonts
markdown_url: https://help.shoppyconnect.com/store-locator/settings-and-design/colours-and-fonts.md
last_updated: 2026-11-05
tags: ["settings", "design", "colours", "fonts", "theme", "customizer", "branding"]
---

# Colours and fonts

> Use the visual customizer to match your store locator's font, colours, and corner style to your brand, with a live preview.

The customizer lets you change your store locator's font, colours, and corner rounding, and see the result as you go.

## Open the customizer

1. Go to **Settings** › **Design**.
2. Under **Colours, fonts & more**, click **Open customizer**.

![The Customize page, with Font Family, Radius, theme presets, and custom theme colours on the left, and a live preview of the store locator on the right](https://help.shoppyconnect.com/_astro/01-customizer.CQXTPQeI_Z1Nh8Bv.webp)

The left side has the settings. The right side is a live preview of your store locator. Use the buttons at the top to preview it on desktop, tablet, or mobile.

## Change the look

- **Font Family**: the font for the store locator. Choose **Inherit** to use your theme's font, or pick one, such as **Inter**, **Poppins**, **Open Sans**, **Montserrat**, or **DM Serif Text**.
- **Radius**: how rounded corners are on buttons, cards, and fields, from `0` (square) to `1` (most rounded).
- **Theme**: a ready-made colour set, such as **Zinc**, **Nature**, **Gold**, **Blue**, or **Green**. Click one to try it in the preview.

## Use your own colours

1. Next to **Custom Theme**, click **Enable custom theme**.
2. Set each colour. The main ones are:
   - **Background** and **Foreground**: the page background and the main text colour.
   - **Primary** and **Primary Foreground**: buttons, such as **Search**, and the text on them.
   - **Card** and **Card Foreground**: store cards and their text.
   - **Muted** and **Muted Foreground**: softer backgrounds and secondary text.
   - **Border**, **Input**, and **Ring**: borders, field outlines, and the highlight around a selected field.
   - **Destructive**: error messages.
3. Click a colour to pick it, or type an HSL value, such as `240, 5.9%, 10%`.

Each **Foreground** colour is the text that sits on the colour above it. Keep enough contrast between them, so text stays easy to read.

## Save or discard

- Click **Save** to apply your changes to your store locator.
- Click **Discard** to undo changes you haven't saved.
- Click **Back** to return to **Settings**.

## Tips

- Start from the preset closest to your brand, then enable a custom theme and adjust only the colours you need.
- Check the mobile preview. Most customers look for stores on their phones.
- For changes the customizer doesn't cover, use **Custom CSS** on the Design tab. See [Design and layouts](https://help.shoppyconnect.com/store-locator/settings-and-design/design-and-layouts.md#custom-css).

## Related guides

- [Design and layouts](https://help.shoppyconnect.com/store-locator/settings-and-design/design-and-layouts.md)
- [Custom layouts](https://help.shoppyconnect.com/store-locator/settings-and-design/custom-layouts.md)