Sheet
How to use the Sheet block in the Meditative Folks Theme.
Sheet
At a glance
Renders a trigger button that opens a sheet. 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 |
Sheet
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Sheet direction | Controls “Sheet direction” on the storefront. Open the theme editor to preview live. | right | Always |
| Sheet size (mobile) | Width for left and right sheets. Height for top and bottom sheets. | 400 | Always |
| Sheet size (tablet) | Width for left and right sheets. Height for top and bottom sheets. | 400 | Always |
| Sheet size (desktop) | Width for left and right sheets. Height for top and bottom sheets. | 400 | 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.
Sheet direction
Controls “Sheet direction” on the storefront. Open the theme editor to preview live. Default: right.
Sheet size (mobile)
Width for left and right sheets. Height for top and bottom sheets. Default: 400.
Sheet size (tablet)
Width for left and right sheets. Height for top and bottom sheets. Default: 400.
Sheet size (desktop)
Width for left and right sheets. Height for top and bottom sheets. Default: 400.
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.