Dialog
How to use the Dialog block in the Meditative Folks Theme.
Dialog
At a glance
Renders a trigger button that opens a dialog. Nested theme blocks appear
Used in
- Configure where this block is available in the parent section.
Settings
Trigger
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | Open | Always |
| Accessibility label | Required for icon-only buttons. Describes the button for screen readers. | — | Icon-only button (no button text) |
Icon
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | none | 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 |
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 |
| Full width button | Stretches the button across the full width of its container. | 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 |
Dialog
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Width (mobile) | Controls “Width (mobile)” on the storefront. Open the theme editor to preview live. | 560 | Always |
| Width (tablet) | Controls “Width (tablet)” on the storefront. Open the theme editor to preview live. | 560 | Always |
| Width (desktop) | Controls “Width (desktop)” on the storefront. Open the theme editor to preview live. | 560 | Always |
| Min height (mobile) | Controls “Min height (mobile)” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Min height (tablet) | Controls “Min height (tablet)” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Min height (desktop) | Controls “Min height (desktop)” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
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: Open.
Accessibility label
Required for icon-only buttons. Describes the button for screen readers. Default: —. This control appears when: Icon-only button (no button text).
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: none.
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.
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.
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.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button has text or an icon.
Width (mobile)
Controls “Width (mobile)” on the storefront. Open the theme editor to preview live. Default: 560.
Width (tablet)
Controls “Width (tablet)” on the storefront. Open the theme editor to preview live. Default: 560.
Width (desktop)
Controls “Width (desktop)” on the storefront. Open the theme editor to preview live. Default: 560.
Min height (mobile)
Controls “Min height (mobile)” on the storefront. Open the theme editor to preview live. Default: 0.
Min height (tablet)
Controls “Min height (tablet)” on the storefront. Open the theme editor to preview live. Default: 0.
Min height (desktop)
Controls “Min height (desktop)” on the storefront. Open the theme editor to preview live. Default: 0.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
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.