Button

Buttons are essential elements for guiding users through your site and encouraging actions such as buying a product, signing up for a newsletter, or navigating between pages.

Foxify makes it simple to add, customize, and style buttons to suit your store's look and functionality.

How to add a Button

Steps:

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

Once you’ve added the button, the next step is to edit its text to match your desired action.

Steps:

1. Select the relevant button element in the editor.

2. Use the tools bar above the selected button element to quickly edit it.

All the formatting tools below can be found in the right handsided Inspector panel.

Button label and Click action

Insert your Button label and Set the Click action of it.

Click action includes:

• 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 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

• Open pop-up: Insert the popup content to open a popup when clicked.

• Copy text: When the button is clicked, a specific piece of text will be automatically copied to the user's clipboard.

You can add an icon to your button.

Button State

Select the button state you want to update: Normal/ Hover.

Button Style

Select your pre-defined button styles in the Global styles to apply to an existing text element.

Select a Button style will override all custom styles made to the element.

See more: Global styles

Color Fill

Set the text color and background color of the buttons.

Text Font, Spacing, and Styles

• Font: Choose from hundreds of fonts. You can also upload your own fonts to Foxify.

• Weight and Size: Define the font weight and font size of the text.

• Text case: Click the icons to set the text's capitalization: As typed , Upper case AG, Title case Ag, or Lower case ag.

• Spacing: Change the spacing between the lines and characters in the text box.

• Text style: Normal/Italic.