# Button
Buttons are essential elements for guiding shoppers toward an action, such as visiting a page, contacting your store, jumping to a section, or opening a pop-up.
You can customize each button's label, click action, and appearance to match its purpose.
## When to use Button
* **Guide shoppers to a destination:** Link to a product, collection, or other page.
* **Encourage an action:** Let shoppers contact your store, copy text, or open a pop-up.
* **Navigate within a page:** Take shoppers directly to a specific section using an anchor link.
## How to add a Button
1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **`E`**.
2. Select **Buttons.**
3. Drag the button onto your canvas.
## How to edit a Button
1. **Select** the relevant button element in the editor.
2. Use the toolbar above the selected button element to quickly edit it.
All the formatting tools below can be found in the right-hand side Inspector panel.
### Button label, Click action and Icon
Insert your **Button label** and set the **Click action** of it.
| Action | What it does |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Open link** | Insert a page URL or select a Shopify page to open the link when clicked. |
| **Send email** | Enter the email address to let customers send an email when clicked. |
| **Call phone** | Enter your phone number. |
| **Jump to anchor** | Insert the section ID to jump to that specific section when clicked.
See more: [Create an anchor link](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-anchor-link) |
| **Open pop-up** | Insert the pop-up content to open a pop-up when clicked. |
| **Copy text** | When the button is clicked, a specific piece of text will be automatically copied to the user's clipboard. |
| **Go to product/ article** | Opens the relevant product or article destination.
*(See note below for special usage).* |
The **"Go to product/ article"** action is an exclusive option that dynamically appears *only* when the Button element is placed inside a **Product Card** or a **Blog Card**.
| Option | What it does | Purpose |
| -------- | --------------------------- | ---------------------------------------------------------------------- |
| **Icon** | Adds an icon to the button. | Reinforce the button's purpose or make the action easier to recognize. |
### Tracking events
Tracking button interactions can provide valuable insights into your users' behavior. You can enable Google Analytics (GA) and Facebook Pixel tracking for button clicks.
1. **Enable Tracking Events**: Toggle the **Enable tracking events** option to ON.
2. **Configure GA Event**: Under **GA Event Name**, enter the name of the event you want to track (e.g., `button_click`).
3. **Facebook Pixel Event**: Select the relevant event from the dropdown list:
| Event | Purpose |
| ------------------------ | ------------------------------------------------------------------------- |
| **Custom** | Use a custom event name for a specific interaction (e.g., `BuyNowClick`). |
| **ViewContent** | Track a content-view event. |
| **AddToCart** | Track an add-to-cart event. |
| **InitiateCheckout** | Track a checkout-initiation event. |
| **Purchase** | Track a purchase event. |
| **Lead** | Track a lead event. |
| **CompleteRegistration** | Track a registration-completion event. |
| **Contact** | Track when a visitor contacts your business. |
### Button State
| Option | What it does |
| ---------------- | --------------------- |
| **Button state** | **Normal**/ **Hover** |
### Button Style
| Option | What it does |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button Style** | Select pre-defined button styles in Global styles to apply to an existing button element. It will override all custom styles made to the element.
*See more:* [*Global styles*](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/global-styles) |
### Color Fill
| Option | What it does |
| -------------- | ------------------------------------------------------- |
| **Color fill** | Set the text color and background color of the buttons. |
### Text Font, Spacing, and Styles
| Option | What it does |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | Choose from hundreds of integrated fonts/
[Upload your custom fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font). |
| **Weight** **and Size** | Adjust the font weight and size of the button label. |
| **Text case** | Set text capitalization:
**As typed/ UPPERCASE/ Title Case/ lowercase** |
| **Spacing** | Adjust the line and character spacing in the text box:
**Line height/ Letter spacing** |
| **Text style** | **Normal/ *Italic*** |
## Tips and best practices
* **Use action-oriented labels:** Choose clear, concise labels such as “Shop now,” “Contact us,” or “Learn more” to tell shoppers what happens when they click.
* **Match the label to the action:** Make sure the button text accurately reflects its click action to avoid confusing shoppers.
* **Keep button styles consistent:** Use consistent colors, typography, and styling for buttons with similar purposes across your page.
* **Make buttons easy to notice:** Ensure sufficient contrast between the button text and background so shoppers can identify clickable elements quickly.
* **Test every breakpoint:** Check button size, alignment, and text wrapping on desktop, tablet, and mobile to ensure buttons remain easy to use.
## FAQs
#### Can a button perform actions other than opening a link?
Yes. Depending on the selected click action, a button can send an email, initiate a phone call, jump to an anchor, open a pop-up, or copy text.
#### Can I track button clicks?
Yes. You can enable tracking events and configure Google Analytics and Facebook Pixel event options in the button settings. The relevant analytics setup may also be required.
#### Why did my custom button styles change?
Applying a predefined style from Global styles overrides the button element's existing custom styles. Review the style settings after applying a global style.
## Related Articles
How do I create an anchor link?
Apply global styles across your store
Optimize for mobile with AI responsive