Quantity selector
How to use the Quantity selector block in the Meditative Folks Theme.
Quantity selector
At a glance
Quantity stepper for the product form.
Used in
- Configure where this block is available in the parent section.
Settings
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content direction (mobile) | Controls “Content direction (mobile)” on the storefront. Open the theme editor to preview live. | row | Always |
| Content direction (tablet and desktop) | Controls “Content direction (tablet and desktop)” on the storefront. Open the theme editor to preview live. | row | Always |
Label
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show label | Turns “Show label” on or off on the storefront. | Yes | Always |
| Label text | Controls “Label text” on the storefront. Open the theme editor to preview live. | Quantity | show label |
| Use global H3 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | show label |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | Show label is on and Use global H3 styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | Show label is on and Use global H3 styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | Show label is on and Use global H3 styles is off |
| Heading font weight | Sets how bold heading text appears. | 500 | Show label is on and Use global H3 styles is off |
Buttons
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | outline | Always |
Setting details
Each control from the tables above, explained simply:
Content direction (mobile)
Controls “Content direction (mobile)” on the storefront. Open the theme editor to preview live. Default: row.
Content direction (tablet and desktop)
Controls “Content direction (tablet and desktop)” on the storefront. Open the theme editor to preview live. Default: row.
Show label
Turns “Show label” on or off on the storefront. Default: Yes.
Label text
Controls “Label text” on the storefront. Open the theme editor to preview live. Default: Quantity. This control appears when: show label.
Use global H3 heading 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: show label.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: Show label is on and Use global H3 styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: Show label is on and Use global H3 styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: Show label is on and Use global H3 styles is off.
Heading font weight
Sets how bold heading text appears. Default: 500. This control appears when: Show label is on and Use global H3 styles is off.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: outline.
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.