Brand logo
How to use the Brand logo block in the Meditative Folks Theme.
Brand logo
At a glance
Displays your store logo from Theme settings → Brand assets. Links to your homepage.
Used in
- Header (via theme blocks)
Settings
Logo settings
| Setting | What it does | Default | Shows when |
|---|
Edit default, inverse, and favicon images in Theme settings → Brand assets.
| Logo type | Controls “Logo type” on the storefront. Open the theme editor to preview live. | default_logo | Always | | Alt text | Describe the logo for screen readers. Leave blank to use the image alt text or shop name. | — | Always | | Hover effect | Controls “Hover effect” on the storefront. Open the theme editor to preview live. | scale | Always |
Image loading
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Loading | Use Eager for logos in the header. Lazy is better for footer or below-the-fold logos. | lazy | Always |
| Fetch priority | High can help the header logo appear sooner. Low defers it behind more important resources. | auto | Always |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Text alignment | Controls “Text alignment” on the storefront. Open the theme editor to preview live. | center | Always |
Logo max width settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use theme logo max width | Uses Logo max width from Theme settings → Brand assets on all screen sizes. | No | Always |
| Logo max width on mobile (px) | Controls “Logo max width on mobile (px)” on the storefront. Open the theme editor to preview live. | 20 | use global logo max width is off |
| Logo max width on tablet (px) | Controls “Logo max width on tablet (px)” on the storefront. Open the theme editor to preview live. | 100 | use global logo max width is off |
| Logo max width on desktop (px) | Controls “Logo max width on desktop (px)” on the storefront. Open the theme editor to preview live. | 150 | use global logo max width is off |
Text fallback typography
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global heading font family | When no logo image is set, the shop name uses your global heading font family. | Yes | Always |
| Font family | Controls “Font family” on the storefront. Open the theme editor to preview live. | inter_n6 | use global heading font family is off |
| Use global heading styles | When no logo image is set, the shop name uses global H1 heading styles. | Yes | Always |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 32 | Use global heading styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 40 | Use global heading styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 48 | Use global heading styles is off |
| Heading font weight | Sets how bold heading text appears. | 700 | Use global heading styles is off |
Add trademark symbol (™) after the logo
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Add trademark symbol (™) after the logo | Controls “Add trademark symbol (™) after the logo” on the storefront. Open the theme editor to preview live. | No | Always |
| Trademark horizontal position | Enter a number in pixels. Use a negative value to move left and a positive value to move right. | 0 | add trademark symbol is on |
| Trademark vertical position | Enter a number in pixels. Use a negative value to move up and a positive value to move down. | 0 | add trademark symbol is on |
| Trademark symbol color | Controls “Trademark symbol color” on the storefront. Open the theme editor to preview live. | #000000 | add trademark symbol is on |
Trademark symbol size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Trademark size on mobile (px) | Controls “Trademark size on mobile (px)” on the storefront. Open the theme editor to preview live. | 14 | add trademark symbol is on |
| Trademark size on tablet (px) | Controls “Trademark size on tablet (px)” on the storefront. Open the theme editor to preview live. | 16 | add trademark symbol is on |
| Trademark size on desktop (px) | Controls “Trademark size on desktop (px)” on the storefront. Open the theme editor to preview live. | 18 | add trademark symbol is on |
Setting details
Each control from the tables above, explained simply:
Logo type
Controls “Logo type” on the storefront. Open the theme editor to preview live. Default: default_logo.
Alt text
Describe the logo for screen readers. Leave blank to use the image alt text or shop name. Default: —.
Hover effect
Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: scale.
Loading
Use Eager for logos in the header. Lazy is better for footer or below-the-fold logos. Default: lazy.
Fetch priority
High can help the header logo appear sooner. Low defers it behind more important resources. Default: auto.
Text alignment
Controls “Text alignment” on the storefront. Open the theme editor to preview live. Default: center.
Use theme logo max width
Uses Logo max width from Theme settings → Brand assets on all screen sizes. Default: No.
Logo max width on mobile (px)
Controls “Logo max width on mobile (px)” on the storefront. Open the theme editor to preview live. Default: 20. This control appears when: use global logo max width is off.
Logo max width on tablet (px)
Controls “Logo max width on tablet (px)” on the storefront. Open the theme editor to preview live. Default: 100. This control appears when: use global logo max width is off.
Logo max width on desktop (px)
Controls “Logo max width on desktop (px)” on the storefront. Open the theme editor to preview live. Default: 150. This control appears when: use global logo max width is off.
Use global heading font family
When no logo image is set, the shop name uses your global heading font family. Default: Yes.
Font family
Controls “Font family” on the storefront. Open the theme editor to preview live. Default: inter_n6. This control appears when: use global heading font family is off.
Use global heading styles
When no logo image is set, the shop name uses global H1 heading styles. Default: Yes.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 32. This control appears when: Use global heading styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 40. This control appears when: Use global heading styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 48. This control appears when: Use global heading styles is off.
Heading font weight
Sets how bold heading text appears. Default: 700. This control appears when: Use global heading styles is off.
Add trademark symbol (™) after the logo
Controls “Add trademark symbol (™) after the logo” on the storefront. Open the theme editor to preview live. Default: No.
Trademark horizontal position
Enter a number in pixels. Use a negative value to move left and a positive value to move right. Default: 0. This control appears when: add trademark symbol is on.
Trademark vertical position
Enter a number in pixels. Use a negative value to move up and a positive value to move down. Default: 0. This control appears when: add trademark symbol is on.
Trademark symbol color
Controls “Trademark symbol color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: add trademark symbol is on.
Trademark size on mobile (px)
Controls “Trademark size on mobile (px)” on the storefront. Open the theme editor to preview live. Default: 14. This control appears when: add trademark symbol is on.
Trademark size on tablet (px)
Controls “Trademark size on tablet (px)” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: add trademark symbol is on.
Trademark size on desktop (px)
Controls “Trademark size on desktop (px)” on the storefront. Open the theme editor to preview live. Default: 18. This control appears when: add trademark symbol is on.
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.