Guide
How to use the Guide block in the Meditative Folks Theme.
Guide
At a glance
Size or care guide trigger and content container. You choose the button label, icon, and whether the chart opens in a dialog, sheet, or accordion.
Used in
- Configure where this block is available in the parent section.
Settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Style | Chooses dialog, sheet, or accordion for the size chart. | Dialog | Always |
Trigger
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button label | Text on the trigger (for example Size chart or Size guide). Also used as the accordion title. | Size guide | Always |
| Icon | Ruler icon next to the label (and on the accordion heading). | Ruler | Always |
| Icon position | Places the icon before or after the label. | Before text | Always |
| Font size (mobile) | Sets the trigger font size on small screens. | 14 | Style is not Accordion |
| Font size (tablet) | Sets the trigger font size on tablet screens. | 14 | Style is not Accordion |
| Font size (desktop) | Sets the trigger font size on desktop screens. | 14 | Style is not Accordion |
| Icon size | Sets the trigger or accordion leading icon size. | 20 | Always |
This uses h4 heading styles for the dialog heading (shows when Style is Dialog)
Dialog
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Width (mobile) | Dialog width on small screens. | 560 | Style is Dialog |
| Width (tablet) | Dialog width on tablet screens. | 560 | Style is Dialog |
| Width (desktop) | Dialog width on desktop screens. | 560 | Style is Dialog |
| Min height (mobile) | Minimum dialog height on small screens. | 0 | Style is Dialog |
| Min height (tablet) | Minimum dialog height on tablet screens. | 0 | Style is Dialog |
| Min height (desktop) | Minimum dialog height on desktop screens. | 0 | Style is Dialog |
Sheet
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Sheet direction | Edge the sheet slides in from. | From right | Style is Sheet |
| Sheet size (mobile) | Width for left/right sheets, or height for top/bottom, on small screens. | 400 | Style is Sheet |
| Sheet size (tablet) | Width for left/right sheets, or height for top/bottom, on tablet. | 400 | Style is Sheet |
| Sheet size (desktop) | Width for left/right sheets, or height for top/bottom, on desktop. | 400 | Style is Sheet |
| Color scheme | Colors for the dialog or sheet panel. | scheme-1 | Style is Dialog or Sheet |
Accordion
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Open by default | Opens the accordion when the page loads. | No | Style is Accordion |
| Closed icon | Icon shown when the accordion is collapsed. | Plus | Style is Accordion |
| Open icon | Icon shown when the accordion is expanded. | Minus | Style is Accordion |
Typography
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global accordion styles | Use accordion sizes from Theme settings → Typography. Turn off to set sizes for this block only. | Yes | Style is Accordion |
| Trigger size (mobile) | Accordion heading size on small screens. | 20 | Style is Accordion and Use global accordion styles is off |
| Trigger size (tablet) | Accordion heading size on tablet. | 20 | Style is Accordion and Use global accordion styles is off |
| Trigger size (desktop) | Accordion heading size on desktop. | 20 | Style is Accordion and Use global accordion styles is off |
| Use custom trigger text color | Override the accordion heading color. | No | Style is Accordion |
| Trigger text color | Accordion heading color. | #111111 | Style is Accordion and Use custom trigger text color is on |
| Content size (mobile) | Accordion body text size on small screens. | 16 | Style is Accordion and Use global accordion styles is off |
| Content size (tablet) | Accordion body text size on tablet. | 16 | Style is Accordion and Use global accordion styles is off |
| Content size (desktop) | Accordion body text size on desktop. | 16 | Style is Accordion and Use global accordion styles is off |
How to use this block
1. Add this block once to your product section.
2. Inside the block, add one or more Guide entry blocks.
3. For each entry, upload a size chart image and set a product, collection, and/or Apply to all products.
4. On the storefront, the block shows a trigger only when a matching entry is found. Product > Collection > Apply to all products. Exactly one guide is shown per product.
When to use this block vs Dynamic guide
Use this Guide block when you want everything configured in the theme editor with no metaobject setup, you have a modest number of charts (tens, not hundreds), guides are specific to this theme, and one team manages storefront design and size-chart content together.
Use Dynamic guide instead when you manage many guides centrally in Admin → Content → Metaobjects, the same guides must work across multiple themes or be maintained outside the theme editor, a content team updates charts without opening the theme customizer, or you need store-wide reuse and bulk editing in Shopify admin.
Important: Do not add both Guide and Dynamic guide to the same product section. Only one size-guide experience should be active.
Setting details
Each control from the tables above, explained simply:
Style
Chooses how the size chart is shown: a centered dialog, a sliding sheet, or an inline accordion. Default: Dialog.
Button label
Text customers tap to open the guide (or the accordion heading). Default: Size guide.
Icon
Ruler or ruler dimension line icon. Default: Ruler.
Icon position
Places the icon before or after the button or accordion label. Default: Before text.
Font size (mobile)
Sets the trigger font size on small screens. Default: 14.
Font size (tablet)
Sets the trigger font size on tablet screens. Default: 14.
Font size (desktop)
Sets the trigger font size on desktop screens. Default: 14.
Icon size
Sets the icon size next to the label. Default: 20.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview dialog, sheet, and accordion in the theme editor on mobile and desktop.