Add and style buttons

How to insert and edit buttons on your page

Using buttons is a great way to encourage customers to take action. Stunning CTA buttons minimize friction in the buying process, guide shoppers toward taking the right action, reduce cart abandonment, and help in closing the sale.

In this article, we will go through some steps to create buttons for your store.

How to add a button element to your section

To add any button in a specific section, you just need to hit Add block > Button.

How to customize a button

After adding a button to your section, simply click on that block to open its settings tab and style it as you wish!

💡Tip: Avoid adding large side margins to your button to keep your button mobile-friendly.

Change a button style

Choose a style from your Global style for buttons. To add or update styles, see this article.

Set the Click action

  • Open link: Select a page from your Shopify or add an external link to your button to direct visitors to your desired destination.

If you are linking your button to an external site, you will need to include the full URL of that page, including the URL's HTTPS protocol.

💡Tip: simply copy the link right from the address bar of your browser.

  • Send email: A click-to-email button directs customers to their email-sending modal.

  • Call phone: A click-to-call button lets customers directly call your business to get in contact. This only works on some browsers and mostly on calling devices.

  • Jump to anchor: A jump-to-anchor button quickly directs customers to your desired element of the page.

To set the section-id, in the element you want to jump to, insert a Unique ID for it in General settings > Custom attributes.

Change a button font

Foxify uses Google Fonts API to deliver the fonts.

In the button styles settings, simply click on Select font > choose the font you like > hit Select.

Last updated