Add Button element

Firstly, you can check this video about the 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.

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

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

General configuration

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 belowincrease button size pageflyIn this case, we increase the Padding right and left from 10 px to 30px and Padding top and bottom from 12px to 20px.

Let’s join our PageFly Community to share any questions or concerns and get more useful eCommerce information!

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 itTo 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 EditorPaste this code into

{{ form | payment_button }}

You can check the gif below. Note that you need to publish to see the result.buy it nowIn 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

CONTENT
Button Text:  Insert and style the content of the heading. The button’s width will expand based on the length of this text.
Show icon: Enable / Disable icon

Icon Position: Choose among left, right of the top for icon position

ACTION
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 here

Styling configuration

STYLE PRESET
Style Presets:  choose to style for the button with 5 variants.
Button State: contains 3 options Normal, Hover, Selected that you can choose for your button

You can check more information about the Styling tab here

How to increase the button’s 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.

You can check the gif below

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

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.

Navigate this category

PreviousPrevious article

Next articlePrevious

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

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

I got it!