Header H6
How to use the Header H6 block in the Meditative Folks Theme.
Header H6
At a glance
Smallest heading level for labels and micro titles.
Used in
- Configure where this block is available in the parent section.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Heading | Always |
| Use global H6 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | No | h6Heading is filled in |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | use global h6 heading styles is off and h6Heading is filled in |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | use global h6 heading styles is off and h6Heading is filled in |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | use global h6 heading styles is off and h6Heading is filled in |
| Heading color | Controls “Heading color” on the storefront. Open the theme editor to preview live. | #000000 | use global h6 heading styles is off and h6Heading is filled in |
| Heading font weight | Sets how bold heading text appears. | 500 | use global h6 heading styles is off and h6Heading is filled in |
| Visually hide heading and subheading | Controls “Visually hide heading and subheading” on the storefront. Open the theme editor to preview live. | No | h6Heading is filled in |
| Text wrap | Controls “Text wrap” on the storefront. Open the theme editor to preview live. | balance | h6Heading is filled in |
| Content alignment | If the block is inside the flex block, content align does not work. Move it outside the flex block to work. | center | Always |
Setting details
Each control from the tables above, explained simply:
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Heading.
Use global H6 heading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: No. This control appears when: h6Heading is filled in.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: use global h6 heading styles is off and h6Heading is filled in.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: use global h6 heading styles is off and h6Heading is filled in.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: use global h6 heading styles is off and h6Heading is filled in.
Heading color
Controls “Heading color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: use global h6 heading styles is off and h6Heading is filled in.
Heading font weight
Sets how bold heading text appears. Default: 500. This control appears when: use global h6 heading styles is off and h6Heading is filled in.
Visually hide heading and subheading
Controls “Visually hide heading and subheading” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: h6Heading is filled in.
Text wrap
Controls “Text wrap” on the storefront. Open the theme editor to preview live. Default: balance. This control appears when: h6Heading is filled in.
Content alignment
If the block is inside the flex block, content align does not work. Move it outside the flex block to work. Default: center.
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.