> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-settings/variant-pills.md).

# Variant pills

Variant pills control how your product options (like size or color) look. Clear, consistent pills make options easier to scan and tap, especially on mobile.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FSKYN32iCv0yQdzbbTrqE%2FCapture%20d'%C3%A9cran%202026-02-19%20185251.png?alt=media&amp;token=ea2ef4e9-8f74-42c0-8075-fdc8d107866c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### How to set it up

* Go to **Online Store** > **Themes** > **Customize**.
* Open **Theme settings** > **Variant pills**.
* Make your changes, preview live, then click **Save**.
  {% endhint %}

### Settings

#### Border

* **Thickness**: Sets how bold the pill outline appears. Thicker outlines increase visibility.
* **Corner radius**: Rounds the pill corners. More rounding creates softer, more “pill‑like” shapes.

***

### **Tips**

* Keep contrast high enough for readability. If your background is busy, increase Thickness or Opacity.
* Use a Corner radius that matches your overall brand style. Rounded feels friendly; square feels sharp.
* Test on mobile to ensure pills are easy to tap and labels do not wrap awkwardly.