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