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.
Access the Button element
- Step 1: Click on the Plus icon which is the Add element function
- Step 2: Click on the Button element in the dropdown menu
- Step 3: 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 and drop one of these variants you want on the page editor
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.
The parameters in the General and Styling tabs are specific for this element
| General tab’s parameters | |
| 1. CONTENT |
|
| 2. ACTION | You can read more about the ACTION parameter here. |
| 3.TRACKING | This is a place to set up: |
| 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. |
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
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.
In order to add the Paypal button, you need to set up the Paypal in your Shopify store and then using the code above.
You can consult this video to know how to link an element to a specific section
You can check this video tutorial about the Button element here
For further discussion, please join our ever-growing Facebook Group to get exclusive content and promotion!
