Add Button element

1. About Button ElementClick to copy

1.1. What is Button Element?Click to copy

PageFly 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 check more details in the video tutorial below.

1.2. Access the Button ElementClick to copy

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

2. Button Element ConfigurationClick to copy

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 the layout to see its parameters.

button element

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

2.1. General ConfigurationClick to copy

2.1.1. Button Type

There are 3 options to choose: Text Only, Text With Icon and Icon Only.

2.1.2. Button TextClick to copy

Button Text: Insert and style the content of the heading. The button’s width will expand based on the length of this text.

button element

2.1.3. Edit IconsClick to copy

  • Show icon: Enable / Disable icon
  • Icon Position: Choose among left, right of the top for icon position

button element

2.1.4. ActionClick to copy

button element

You can direct to a link, a section, a pop-up, an email address or a phone number by Click Action.

Please read more about the ACTION parameter here.

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.

2.2. Styling ConfigurationClick to copy

Global Style: Choose to style for the button with 5 variants.button element

State Styling: contains 3 options Normal state, Mouse over state, and Active/Selected state that you can choose for your button.

button elementYou can check more information about the Styling tab.

You can add click action for button by following this video tutorial:

3. Edit the Element

3.1. How to Increase the Button Size?

Basically, if you increase the content button, then the button size will also automatically increase. In another case, you can change the Padding for the Button element. You can check the gif below.

button element

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

3.2. How to Create a Dynamic Checkout Button?Click to copy

This is the ‘’BUY IT NOW’ Button.
Please note that this only works inside the Product Details element (You have to add this into the Product Details element with the option Combined Variant turned on)
In this case, we need to use HTML/Liquid element and add code into it and please follow these steps below:

  • Step 1: Click the icon named Add element on the left sidebar
  • Step 2: Scroll down to Basic section > choose the HTML/Liquid element
  • Step 3: Drag and drop this element into the page editor
  • Step 4: Click on the Open Code Editor button in the General tab to open the HTML/ Liquid Code Editor
  • Step 5: Paste this code below into: {{ form | payment_button }}

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

button element

In order to add the Paypal button, you need to set up the Paypal in your Shopify store and then use the code above. 

3.3. How to Make a Full-Width Button?

In case you want your Button to be Full-Width, choose your Button > General Tab > turn on Enable Full-Width.

button element

4. Takeaways

Button Element is to make clear to potential customers which action to take next, to push customers down to sales funnel, to close the sale, which’s essential to increase conversion rate.

5. Frequently Asked Questions

5.1. What are examples of call to action?

The 5 best examples are: ‘Call now’, ‘Buy now’, ‘Subscribe’, ‘Sign Up’ and ‘Learn More’

5.2. Can I style the Buttone Element?

Yes you can. The PageFly Button Element come in with 5 variants, with 3 state styling for Normal state, Mouse over state, and Active/Selected state.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us