HTML/Liquid

About HTML Liquid Element

By using the HTML Liquid Element, you can add HTML code into the PageFly editor. HTML code helps you display custom content on your live page with code you’ve taken from outside.

For additional details, we encourage you to view this video tutorial:

How To Access The HTML Liquid Element?

• Step 1: Click on the Add Element function on the left toolbar
• Step 2: Click on the HTML/ Liquid element in the menu
• Step 3: Drag and drop the element into the page editor and then start using it.

How To Configure The HTML Liquid Element

General Settings

Drag the HTML Liquid element onto the layout and select it to see its parameters. Click Open code editor to open the code editor where you can add the HTML code into.

The code editor modal opens.

1. Click the Cancel button or the Close icon at the top if you don’t want to use the custom code anymore. When you take this action (Cancel or Close), the custom code that you change will not be saved.
2. Click the Save button to save the custom code you enter and it will be applied to your page editor.

Styling Settings

You can use the Styling tab to adjust the styling option you want. Check more information about the Styling tab here.

Use Case

• 3rd party apps: You can use this element to add embed code from 3rd party apps that are not integrated with PageFly
• Add dynamic checkout button: You can use this element to add a “Buy Now” button on your page, you can learn more about it here.

Tips And Best Practice

You should only include the custom code that is necessary for your specific requirements. Avoid including unnecessary code or external libraries, as this can slow down your website’s performance.

Frequently Asked Questions

Why Should I Use HTML Code For My Shop?

HTML code helps you display custom content on your live page with code you’ve taken from outside, or written yourself.

Most Popular HTML Tags You Should Know To Make HTML Editing Much Easier?

Headings (<h1></h1>), paragraph ( <p></p>),  div and span (<div></div>) and table ( <ul> <li> Item 1. <li> Item 2. </ul> ) …