Button element

In this article, you will learn more about PageFly’s button element and how to use it.

About Button element

The Button element is one of the fundamental elements of any page. It acts as a Call To Action for whatever goal you are trying to achieve on your page. You can use the Button element to redirect your visitor to any given URL, scroll to any section of current page, make a phone call, send an email, fire up Google Analytics or Facebook pixel events, download a file, and much more.

pagefly button element 1

The Button element comes with 4 button variations, each with different styling. We will continue to add more variations to help you save time.

Drag a variation to layout and see how it can be configured.

Button element configuration

The Button element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible click-through rate for your Call To Action.

Select the element in layout to see its parameters.

pagefly button element 2

The parameters in the General and Styling tabs are specific for this element

General tab’s parameters
  • Button Text: The text to be displayed on the button. Button’s width will expand based on the length of this text.
  • Show Icon: Enable / Disable icon
2. ACTION You can read more about the ACTION parameter here.
3.TRACKING This is a place to set up:

  • Google Analytics event to your GA account. You can find out how to set it up here.
  • Facebook Pixel when a customer clicks on the element. You can read more here.
4.ATTRIBUTES This is a parameter that all elements have. You can read more here.
5. VISIBILITY This is a parameter that all elements have. You can read more here.
6. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
You can choose to style for the button in Style Presets with 6 variants.

Aside from the below parameters, you can choose Button State for it, which contains 3 options: Normal, Hover, Selected.

1. OVERALL You can read about the OVERALL parameter here.
2. SPACING You can read about the SPACING parameter here.
3. TYPOGRAPHY You can read about the TYPOGRAPHY parameter here.
4. BACKGROUND You can read about the BACKGROUND parameter here. Note that you cannot add a button on an image. If you want to display like that, you can add background image for the button element.
5. BORDER You can read about the BORDER parameter here.
6. DISPLAY You can read about the DISPLAY parameter here.
7. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Sometimes you would want the button to function as an “Add To Cart” or “Buy Now” button. If this is the case then please use the Product Add To Cart button element in the Shopify element category of PageFly.

You can check this video tutorial about Button element here

How to increase the button’s size?

Basically, if you increase the content button, then the button size will be also automatically increased.

In another case, you can change the Padding for the button.

You can check the gif below

increase button size pagefly

In this case, we increase the Padding right and left from 10 px to 30px and Padding top and bottom from 12px to 20px.

How to create a Dynamic Checkout button (BUY IT NOW)

Note that this only works inside the Product Details element (You have to add this into the Product Details element with option Combined Variant turned on)

In this case, we need to use the HTML/ Liquid element and add code into it

To use the HTML/ Liquid element, choose the icon named Add element on the left sidebar > BASIC > choose the HTML/Liquid element, and then drag and drop this element into the page editor.

Click on the Open Code Editor button in the General tab to open the HTML/ Liquid Code Editor

Paste this code into

{{ form | payment_button }}

You can check the gif below. Note that you need to publish to see the result.

buy it now

You can consult this video to know how to link an element to a specific section

Was this helpful?

Try out all PageFly features with Free plan

Don’t have Shopify store yet? Create store

PageFly Help Center is now available in French and Portuguese.Please check the flags on the page header.

I got it!