Header H5
How to use the Header H5 block in the Meditative Folks Theme.
Header H5
At a glance
Compact heading for dense layouts.
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 H5 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | No | h5Heading is filled in |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | use global h5 heading styles is off and h5Heading is filled in |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | use global h5 heading styles is off and h5Heading is filled in |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | use global h5 heading styles is off and h5Heading is filled in |
| Heading color | Controls “Heading color” on the storefront. Open the theme editor to preview live. | #000000 | use global h5 heading styles is off and h5Heading is filled in |
| Heading font weight | Sets how bold heading text appears. | 500 | use global h5 heading styles is off and h5Heading 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 | h5Heading is filled in |
| Text wrap | Controls “Text wrap” on the storefront. Open the theme editor to preview live. | balance | h5Heading 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 H5 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: h5Heading 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 h5 heading styles is off and h5Heading 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 h5 heading styles is off and h5Heading 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 h5 heading styles is off and h5Heading 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 h5 heading styles is off and h5Heading is filled in.
Heading font weight
Sets how bold heading text appears. Default: 500. This control appears when: use global h5 heading styles is off and h5Heading 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: h5Heading is filled in.
Text wrap
Controls “Text wrap” on the storefront. Open the theme editor to preview live. Default: balance. This control appears when: h5Heading 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.