Product variant
How to use the Product variant block in the Meditative Folks Theme.
Product variant
At a glance
Variant picker (dropdowns or swatches).
Used in
- Configure where this block is available in the parent section.
Settings
Option labels
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global H3 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | use global h3 heading styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | use global h3 heading styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | use global h3 heading styles is off |
| Heading font weight | Sets how bold heading text appears. | 600 | use global h3 heading styles is off |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Option spacing | Controls “Option spacing” on the storefront. Open the theme editor to preview live. | 10 | Always |
| Value gap | Controls “Value gap” on the storefront. Open the theme editor to preview live. | 8 | Always |
Buttons
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button shape | Controls “Button shape” on the storefront. Open the theme editor to preview live. | pill | Always |
| Button size | Chooses the button size from Theme settings → Button sizes. | 35 | Always |
| Button padding (horizontal) | Adds empty space (button padding (horizontal)) around the section content. | 4 | Always |
| Active style | Controls “Active style” on the storefront. Open the theme editor to preview live. | border | Always |
| Use custom button colors | Controls “Use custom button colors” on the storefront. Open the theme editor to preview live. | No | Always |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | use custom button colors is on |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | use custom button colors is on |
| Button border color | Controls “Button border color” on the storefront. Open the theme editor to preview live. | #dddddd | use custom button colors is on |
| Active button background | Controls “Active button background” on the storefront. Open the theme editor to preview live. | #000000 | use custom button colors is on |
| Active button text color | Controls “Active button text color” on the storefront. Open the theme editor to preview live. | #ffffff | use custom button colors is on |
| Active button border color | Controls “Active button border color” on the storefront. Open the theme editor to preview live. | #000000 | use custom button colors is on |
Color swatches
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color swatch shape | Controls “Color swatch shape” on the storefront. Open the theme editor to preview live. | circle | Always |
| Color swatch size | Controls “Color swatch size” on the storefront. Open the theme editor to preview live. | 22 | Always |
| Color swatch padding (horizontal) | Adds empty space (color swatch padding (horizontal)) around the section content. | 4 | Always |
Info
| Setting | What it does | Default | Shows when |
|---|
Note: This block respects the global theme setting "Hide variant selector when product has a single variant" (Theme settings → Product Card). If that setting is enabled, the variant controls will be hidden for products with exactly one variant.
Setting details
Each control from the tables above, explained simply:
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.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: use global h3 heading 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: use global h3 heading 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: use global h3 heading styles is off.
Heading font weight
Sets how bold heading text appears. Default: 600. This control appears when: use global h3 heading styles is off.
Option spacing
Controls “Option spacing” on the storefront. Open the theme editor to preview live. Default: 10.
Value gap
Controls “Value gap” on the storefront. Open the theme editor to preview live. Default: 8.
Button shape
Controls “Button shape” on the storefront. Open the theme editor to preview live. Default: pill.
Button size
Chooses the button size from Theme settings → Button sizes. Default: 35.
Button padding (horizontal)
Adds empty space (button padding (horizontal)) around the section content. Default: 4.
Active style
Controls “Active style” on the storefront. Open the theme editor to preview live. Default: border.
Use custom button colors
Controls “Use custom button colors” on the storefront. Open the theme editor to preview live. Default: No.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: use custom button colors is on.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: use custom button colors is on.
Button border color
Controls “Button border color” on the storefront. Open the theme editor to preview live. Default: #dddddd. This control appears when: use custom button colors is on.
Active button background
Controls “Active button background” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: use custom button colors is on.
Active button text color
Controls “Active button text color” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: use custom button colors is on.
Active button border color
Controls “Active button border color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: use custom button colors is on.
Color swatch shape
Controls “Color swatch shape” on the storefront. Open the theme editor to preview live. Default: circle.
Color swatch size
Controls “Color swatch size” on the storefront. Open the theme editor to preview live. Default: 22.
Color swatch padding (horizontal)
Adds empty space (color swatch padding (horizontal)) around the section content. Default: 4.
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.