Product WhatsApp button
How to use the Product WhatsApp button block in the Meditative Folks Theme.
Product WhatsApp button
At a glance
Product page button that opens WhatsApp with a message that includes the product title and URL. Useful when you sell over chat as well as checkout.
Used in
- Product section (buy box)
Settings
Content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | Chat on WhatsApp | Always |
WhatsApp message
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Prefilled message | Uses the WhatsApp number from theme settings. Tokens: {product_title}, {product_url}, {shop_name}. | Hi {shop_name}! I'm interested in {product_title}. {product_url} | Always |
| Accessibility label | Required for icon-only buttons. Describes the link for screen readers. | — | Icon-only button (no button text) |
| Open in new tab | Controls “Open in new tab” on the storefront. Open the theme editor to preview live. | Yes | Button has text or an icon |
Icon
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon | Controls “Icon” on the storefront. Open the theme editor to preview live. | Always | |
| Icon position | Controls “Icon position” on the storefront. Open the theme editor to preview live. | after | An icon is selected and Button text is filled in |
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 16 | An icon is selected |
| Use custom icon color | Controls “Use custom icon color” on the storefront. Open the theme editor to preview live. | No | An icon is selected |
| Icon color | Controls “Icon color” on the storefront. Open the theme editor to preview live. | #111111 | An icon is selected and Use custom icon color is on |
Button style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button has text or an icon |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button has text or an icon |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Button has text or an icon |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | Button is visible and Use global button styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | Button is visible and Use global button styles is off |
| Button padding top & bottom | Adds empty space (button padding top & bottom) around the section content. | 0 | Button is visible and Use global button styles is off |
| Button padding left & right | Adds empty space (button padding left & right) around the section content. | 0 | Button is visible and Use global button styles is off |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Alignment | Controls “Alignment” on the storefront. Open the theme editor to preview live. | center | Always |
| Full width button | Stretches the button across the full width of its container. | No | Button has text or an icon |
| Rounded full | Makes the button a fully rounded pill. | No | Button has text or an icon |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button has text or an icon |
Setting details
Each control from the tables above, explained simply:
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: Chat on WhatsApp.
Prefilled message
Uses the WhatsApp number from theme settings. Tokens: {product_title}, {product_url}, {shop_name}. Default: Hi {shop_name}! I'm interested in {product_title}. {product_url}.
Accessibility label
Required for icon-only buttons. Describes the link for screen readers. Default: —. This control appears when: Icon-only button (no button text).
Open in new tab
Controls “Open in new tab” on the storefront. Open the theme editor to preview live. Default: Yes. This control appears when: Button has text or an icon.
Icon
Controls “Icon” on the storefront. Open the theme editor to preview live. Default: whatsapp.
Icon position
Controls “Icon position” on the storefront. Open the theme editor to preview live. Default: after. This control appears when: An icon is selected and Button text is filled in.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 16. This control appears when: An icon is selected.
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: An icon is selected.
Icon color
Controls “Icon color” on the storefront. Open the theme editor to preview live. Default: #111111. This control appears when: An icon is selected and Use custom icon color is on.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button has text or an icon.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button has text or an icon.
Use global button styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Button has text or an icon.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Button is visible and Use global button styles is off.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Button is visible and Use global button styles is off.
Button padding top & bottom
Adds empty space (button padding top & bottom) around the section content. Default: 0. This control appears when: Button is visible and Use global button styles is off.
Button padding left & right
Adds empty space (button padding left & right) around the section content. Default: 0. This control appears when: Button is visible and Use global button styles is off.
Alignment
Controls “Alignment” on the storefront. Open the theme editor to preview live. Default: center.
Full width button
Stretches the button across the full width of its container. Default: No. This control appears when: Button has text or an icon.
Rounded full
Makes the button a fully rounded pill. Default: No. This control appears when: Button has text or an icon.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button has text or an icon.
Tips
- Confirm the WhatsApp number in Theme settings → Brand assets (or this block’s number field, if present) before publishing.
- Preview the pre-filled message on a live product so the title and URL look right.