Add to cart button
How to use the Add to cart button block in the Meditative Folks Theme.
Add to cart button
At a glance
Adds an Add to cart button on the product form. You can style it like other theme buttons and optionally add shimmer.
Used in
- Product section (buy box)
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show content | Shows or hides this block without removing it from the section. | Yes | Always |
| Additional button classes | Controls “Additional button classes” on the storefront. Open the theme editor to preview live. | — | Show content is on |
| Button variant | Choose the button style for navigation controls. | outline | Show content is on |
| Button size | Choose the button size for navigation controls. | medium | Show content is on |
| Use custom button styles | Use custom styles for the navigation buttons. | No | Show content is on |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | Show content is on and Use custom button styles is on |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | Show content is on and Use custom button styles is on |
| Button padding top & bottom | Adds empty space (button padding top & bottom) around the section content. | 0 | Show content is on and Use custom button styles is on |
| Button padding left & right | Adds empty space (button padding left & right) around the section content. | 0 | Show content is on and Use custom button styles is on |
| Full width button | Stretches the button across the full width of its container. | No | Show content is on |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Show content is on |
Setting details
Each control from the tables above, explained simply:
Show content
Shows or hides this block without removing it from the section. Default: Yes.
Additional button classes
Controls “Additional button classes” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: Show content is on.
Button variant
Choose the button style for navigation controls. Default: outline. This control appears when: Show content is on.
Button size
Choose the button size for navigation controls. Default: medium. This control appears when: Show content is on.
Use custom button styles
Use custom styles for the navigation buttons. Default: No. This control appears when: Show content is on.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Show content is on and Use custom button styles is on.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Show content is on and Use custom button styles is on.
Button padding top & bottom
Adds empty space (button padding top & bottom) around the section content. Default: 0. This control appears when: Show content is on and Use custom button styles is on.
Button padding left & right
Adds empty space (button padding left & right) around the section content. Default: 0. This control appears when: Show content is on and Use custom button styles is on.
Full width button
Stretches the button across the full width of its container. Default: No. This control appears when: Show content is on.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Show content is on.
Tips
- Keep Add to cart next to Buy now in the buy box so shoppers see both actions.
- Enable shimmer draws the eye — use it on one primary action, not every button.