List
How to use the List block in the Meditative Folks Theme.
List
At a glance
Bulleted or icon list for features and benefits.
Used in
- Configure where this block is available in the parent section.
Settings
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | — | Always |
List type
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| List type | Controls “List type” on the storefront. Open the theme editor to preview live. | unordered | Always |
Markers
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Bullet style | Controls “Bullet style” on the storefront. Open the theme editor to preview live. | disc | list type == 'unordered' |
| Number style | Controls “Number style” on the storefront. Open the theme editor to preview live. | decimal | list type == 'ordered' |
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | cart-check | list type == 'unordered' and unordered marker style == 'icon' |
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 16 | list type == 'unordered' and unordered marker style == 'icon' |
| Use custom icon color | Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. | No | list type == 'unordered' and unordered marker style == 'icon' |
| Icon color | Controls “Icon color” on the storefront. Open the theme editor to preview live. | #111111 | list type == 'unordered' and unordered marker style == 'icon' and use custom icon color |
| Start number | Controls “Start number” on the storefront. Open the theme editor to preview live. | 1 | list type == 'ordered' |
| Reverse order | Controls “Reverse order” on the storefront. Open the theme editor to preview live. | No | list type == 'ordered' |
| Marker position | Controls “Marker position” on the storefront. Open the theme editor to preview live. | outside | Always |
Typography
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global paragraph styles | Use paragraph font sizes and weight from your global theme styles. | Yes | Always |
| Font size (mobile) | Sets font size (mobile) in pixels for the matching screen size. | 16 | Use global paragraph styles is off |
| Font size (tablet) | Sets font size (tablet) in pixels for the matching screen size. | 16 | Use global paragraph styles is off |
| Font size (desktop) | Sets font size (desktop) in pixels for the matching screen size. | 18 | Use global paragraph styles is off |
| Font weight | Sets how bold font weight text appears. | 400 | Use global paragraph styles is off |
| Text color | Controls “Text color” on the storefront. Open the theme editor to preview live. | #000000 | Use global paragraph styles is off |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content alignment | If the block is inside the flex block, content align does not work. Move it outside the flex block to work. | left | Always |
| Top spacing | Controls “Top spacing” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Bottom spacing | Controls “Bottom spacing” on the storefront. Open the theme editor to preview live. | 0 | Always |
| Gap between items | Controls “Gap between items” on the storefront. Open the theme editor to preview live. | 8 | Always |
| List indent | Controls “List indent” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Full width list | Controls “Full width list” on the storefront. Open the theme editor to preview live. | Yes | Always |
| Max width | Controls “Max width” on the storefront. Open the theme editor to preview live. | 600 | list full width is off |
Setting details
Each control from the tables above, explained simply:
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: —.
List type
Controls “List type” on the storefront. Open the theme editor to preview live. Default: unordered.
Bullet style
Controls “Bullet style” on the storefront. Open the theme editor to preview live. Default: disc. This control appears when: list type == 'unordered'.
Number style
Controls “Number style” on the storefront. Open the theme editor to preview live. Default: decimal. This control appears when: list type == 'ordered'.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: cart-check. This control appears when: list type == 'unordered' and unordered marker style == 'icon'.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: list type == 'unordered' and unordered marker style == 'icon'.
Use custom icon color
Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: list type == 'unordered' and unordered marker style == 'icon'.
Icon color
Controls “Icon color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: list type == 'unordered' and unordered marker style == 'icon' and use custom icon color.
Start number
Controls “Start number” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: list type == 'ordered'.
Reverse order
Controls “Reverse order” on the storefront. Open the theme editor to preview live. Default: No. This control appears when: list type == 'ordered'.
Marker position
Controls “Marker position” on the storefront. Open the theme editor to preview live. Default: outside.
Use global paragraph styles
Use paragraph font sizes and weight from your global theme styles. Default: Yes.
Font size (mobile)
Sets font size (mobile) in pixels for the matching screen size. Default: 16. This control appears when: Use global paragraph styles is off.
Font size (tablet)
Sets font size (tablet) in pixels for the matching screen size. Default: 16. This control appears when: Use global paragraph styles is off.
Font size (desktop)
Sets font size (desktop) in pixels for the matching screen size. Default: 18. This control appears when: Use global paragraph styles is off.
Font weight
Sets how bold font weight text appears. Default: 400. This control appears when: Use global paragraph styles is off.
Text color
Controls “Text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Use global paragraph styles is off.
Content alignment
If the block is inside the flex block, content align does not work. Move it outside the flex block to work. Default: left.
Top spacing
Controls “Top spacing” on the storefront. Open the theme editor to preview live. Default: 0.
Bottom spacing
Controls “Bottom spacing” on the storefront. Open the theme editor to preview live. Default: 0.
Gap between items
Controls “Gap between items” on the storefront. Open the theme editor to preview live. Default: 8.
List indent
Controls “List indent” on the storefront. Open the theme editor to preview live. Default: 24.
Full width list
Controls “Full width list” on the storefront. Open the theme editor to preview live. Default: Yes.
Max width
Controls “Max width” on the storefront. Open the theme editor to preview live. Default: 600. This control appears when: list full width is off.
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.