Button
How to use the Button block in the Meditative Folks Theme.
Button
At a glance
Call-to-action button with link, style, size, optional icon, and an optional shimmer highlight. Use it in custom layouts, banners, and footers.
Used in
- Custom section and other sections that accept theme blocks
- Nested inside groups, grids, and wrappers
Settings
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | Shop now | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | Button has text or an icon |
| Accessibility label | Required for icon-only buttons. Describes the link for screen readers. | — | Icon-only button (no button text) |
| Open in new tab | Controls “Open in new tab” on the storefront. Open the theme editor to preview live. | No | Button has text or an icon |
Icon
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | arrow-right | Always |
| Icon position | Controls “Icon position” on the storefront. Open the theme editor to preview live. | after | An icon is selected and Button text is filled in |
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 16 | An icon is selected |
| Use custom icon color | Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. | No | An icon is selected |
| Icon color | Controls “Icon color” on the storefront. Open the theme editor to preview live. | #111111 | An icon is selected and Use custom icon color is on |
Button style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button has text or an icon |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button has text or an icon |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Button has text or an icon |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | Button is visible and Use global button styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | Button is visible and Use global button styles is off |
| Button padding top & bottom | Adds empty space (button padding top & bottom) around the section content. | 0 | Button is visible and Use global button styles is off |
| Button padding left & right | Adds empty space (button padding left & right) around the section content. | 0 | Button is visible and Use global button styles is off |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Alignment | Controls “Alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Full width button | Stretches the button across the full width of its container. | No | Button has text or an icon |
| Rounded full | Makes the button a fully rounded pill. | No | Button has text or an icon |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button has text or an icon |
Setting details
Each control from the tables above, explained simply:
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: Shop now.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: Button has text or an icon.
Accessibility label
Required for icon-only buttons. Describes the link for screen readers. Default: —. This control appears when: Icon-only button (no button text).
Open in new tab
Controls “Open in new tab” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: Button has text or an icon.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: arrow-right.
Icon position
Controls “Icon position” on the storefront. Open the theme editor to preview live. Default: after. This control appears when: An icon is selected and Button text is filled in.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: An icon is selected.
Use custom icon color
Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: An icon is selected.
Icon color
Controls “Icon color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: An icon is selected and Use custom icon color is on.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button has text or an icon.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button has text or an icon.
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: Button has text or an icon.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Button is visible and Use global button 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: Button is visible and Use global button styles is off.
Button padding top & bottom
Adds empty space (button padding top & bottom) around the section content. Default: 0. This control appears when: Button is visible and Use global button styles is off.
Button padding left & right
Adds empty space (button padding left & right) around the section content. Default: 0. This control appears when: Button is visible and Use global button styles is off.
Alignment
Controls “Alignment” on the storefront. Open the theme editor to preview live. Default: center.
Full width button
Stretches the button across the full width of its container. Default: No. This control appears when: Button has text or an icon.
Rounded full
Makes the button a fully rounded pill. Default: No. This control appears when: Button has text or an icon.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button has text or an icon.
Tips
- Leave Button text blank and pick an icon for an icon-only button — then fill in Accessibility label.
- Enable shimmer adds a moving highlight. Turn it off for a calmer look.
- Turn Use global button styles off only when this one button should not follow Theme settings.