Pill
How to use the Pill block in the Meditative Folks Theme.
Pill
At a glance
Small pill/badge label for highlights and tags.
Used in
- Configure where this block is available in the parent section.
Settings
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Pill text | Controls “Pill text” on the storefront. Open the theme editor to preview live. | New | Always |
Style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | pill text != blank |
| Button size | Chooses the button size from Theme settings → Button sizes. | small | pill text != blank |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | pill text != blank |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | pill text != blank and use global pill styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | pill text != blank and use global pill styles is off |
| Button padding top & bottom | Adds empty space (button padding top & bottom) around the section content. | 0 | pill text != blank and use global pill styles is off |
| Button padding left & right | Adds empty space (button padding left & right) around the section content. | 0 | pill text != blank and use global pill styles is off |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Alignment | Controls “Alignment” on the storefront. Open the theme editor to preview live. | left | Always |
| Rounded full | Display as a fully rounded pill shape | Yes | pill text != blank |
Setting details
Each control from the tables above, explained simply:
Pill text
Controls “Pill text” on the storefront. Open the theme editor to preview live. Default: New.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: pill text != blank.
Button size
Chooses the button size from Theme settings → Button sizes. Default: small. This control appears when: pill text != blank.
Use global button styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: pill text != blank.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: pill text != blank and use global pill styles is off.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: pill text != blank and use global pill styles is off.
Button padding top & bottom
Adds empty space (button padding top & bottom) around the section content. Default: 0. This control appears when: pill text != blank and use global pill styles is off.
Button padding left & right
Adds empty space (button padding left & right) around the section content. Default: 0. This control appears when: pill text != blank and use global pill styles is off.
Alignment
Controls “Alignment” on the storefront. Open the theme editor to preview live. Default: left.
Rounded full
Display as a fully rounded pill shape Default: Yes. This control appears when: pill text != blank.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.