Dynamic guide
How to use the Dynamic guide block in the Meditative Folks Theme.
Dynamic guide
At a glance
Size guide content driven by product data. 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. Go to Content → Metaobjects.
2. Click "Add Definition".
3. Name it "Size guide" and add these fields:
- field label = 'product', field type = 'Product'.
Click on Add field
- field label = 'collection', field type = 'Collection'.
Click on Add field
- field label = 'image', click on star icon to make it a required field, field type = 'Image'.
4. Create entries for each product or collection group. Upload size charts as images. The block prioritizes an exact product match, then falls back to a collection match. If multiple entries match, only the first match is used.
When to use this block vs Guide
Use Dynamic guide 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.
Use the Guide block instead 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.
Important: Do not add both Dynamic guide and 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.