Settings
Button Design
Choose a button style, custom icon, animation, size, colors, position and spacing to match the WhatsApp button to your brand.
Last updated July 7, 2026
The Button Design tab controls how the floating button looks and where it sits on the screen.
Button Style
| Style | Description |
|---|---|
| Classic Circle | A clean round WhatsApp button the most popular style. |
| Text + Logo | Button with a speech-bubble text beside the icon (set your own Button Text). |
| Agent Photo | Shows a team member's photo for a personal, human touch (set the Agent Photo URL). |
Custom Icon
Toggle Use my own icon to replace the default WhatsApp logo with your brand logo or a custom image (paste an image URL, or upload via Shopify Admin → Content → Files).
Button Animation
A subtle pulsing ring draws attention to the button. You can turn it off for a static button, or set a custom Animation Ring Color (defaults to the button background color).
Button Size
Choose Small, Medium (recommended) or Large.
Colors
Set the Button Background, Icon and Text colors to match your brand.
Button Position
Place the button in one of four spots: Bottom Left, Bottom Right, Middle Left, Middle Right.
Bottom Right is the most common and recognizable position for a chat button.
Button Spacing
Fine-tune the exact distance from the screen edges (0–200 px from left/right/bottom, or 0–100 % from the top for middle positions).
Was this page helpful?