Header cart drawer
How to use the Header cart drawer block in the Meditative Folks Theme.
Header cart drawer
At a glance
Cart icon that opens the side cart drawer.
Used in
- Header (via theme blocks)
Settings
Icon size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon size (mobile) | Controls “Icon size (mobile)” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Icon size (tablet) | Controls “Icon size (tablet)” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Icon size (desktop) | Controls “Icon size (desktop)” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Cart icon | Controls “Cart icon” on the storefront. Open the theme editor to preview live. | shopping-basket-3 | Always |
Cart ping
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show ping animation on cart icon when item is added | Turns “Show ping animation on cart icon when item is added” on or off on the storefront. | Yes | Always |
| Use primary color from color scheme | Applies a color scheme from Theme settings → Colors. | Yes | show cart icon ping is on |
| Ping color | Controls “Ping color” on the storefront. Open the theme editor to preview live. | #ff0000 | show cart icon ping is on and use primary color for ping is off |
Setting details
Each control from the tables above, explained simply:
Icon size (mobile)
Controls “Icon size (mobile)” on the storefront. Open the theme editor to preview live. Default: 24.
Icon size (tablet)
Controls “Icon size (tablet)” on the storefront. Open the theme editor to preview live. Default: 24.
Icon size (desktop)
Controls “Icon size (desktop)” on the storefront. Open the theme editor to preview live. Default: 24.
Cart icon
Controls “Cart icon” on the storefront. Open the theme editor to preview live. Default: shopping-basket-3.
Show ping animation on cart icon when item is added
Turns “Show ping animation on cart icon when item is added” on or off on the storefront. Default: Yes.
Use primary color from color scheme
Applies a color scheme from Theme settings → Colors. Default: Yes. This control appears when: show cart icon ping is on.
Ping color
Controls “Ping color” on the storefront. Open the theme editor to preview live. Default: #ff0000. This control appears when: show cart icon ping is on and use primary color for ping 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.