> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/page-structure-and-elements/pagefly-elements/basic/html-liquid-element.md).

# HTML/Liquid

### About HTML Liquid Element

Summary: By using the [HTML Liquid Element](https://help.pagefly.io/manual/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:

{% embed url="<https://youtu.be/dHIYwGZHLDQ>" %}

### How To Access The HTML Liquid Element?

* **Step 1**: Click on the "**Elements**" icon, located as the second icon from the top on the left toolbar. Then, in the “**PageFly**” tab choose HTML/ Liquid element
* **Step 2**: Drag and drop the element into the page editor and then start using it.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-fd75588b2db9c0d833438b93464b0982ee429531%2FAD_4nXce4aknM-3_SyoTiplFfcNqfnvzFpPZlWMz54AsioOniZo3Y8Htl7qT2i1kzBRVJpXofaAK9MCY39_GiEBBa_apk_yIBf1rFvbjxcTkFQRuVKFHV3hgkHPKpFNE7DXN6op5H5a8Y39X6w4Dc2eMfQkey0nh3Z0t7jKI6Xc0Qcn6uQw.gif?alt=media)

### How To Configure The HTML Liquid Element

#### General Settings

**Step 1**: Drag the HTML Liquid element onto the layout and select it to see its parameters.

**Step 2**: Click Open code editor to open the code editor where you can add the HTML code

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b10ab2e3c4dda86c9d10fee02acecb3b525291ee%2FAD_4nXc5YZUB6yGhhUouG0y5i_noc43QY0k8ubPulKxZ99MLngPvM2ikBv3wRgRSFJtW4BtQHVXNcQOs3_ZL9Wx3R9pK9AGLi_bkLBWBnE_ALcCd4MqDcqpSnpdgROfMT2iZar6ogB060g9aRhMWbOq-CAkey0nh3Z0t7jKI6Xc0Qcn6uQw.gif?alt=media)

The code editor model opens after clicking the “**Open code editor**” button.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b211e8ff6fbce23b9d425ae52ecc7320860aa6f2%2FAD_4nXfnqZLHzm1c_7KKkHbW_76hpqPX7nwUpNRblTpkt3jMv3wQM5nagQMVzZCG5JlwGX-M3DwfqbK4Kgns_UwT-3RuNNtZ6jx8EtWcmE4SQhfPONePThRfsajdKbHGZKyQ9unyymT_KokIYnUPY8ADkey0nh3Z0t7jKI6Xc0Qcn6uQw.png?alt=media)

* Click the “**Cancel**” button if you don’t want to use the custom code anymore. When you take this action, the custom code that you added will not be saved.
* Click the “**Done**” button to save the custom code you entered and it will be applied to your page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5493c1e0b7e7389ecce57eeec406edd742daa656%2FAD_4nXd6fJ0Vryl9eozs6LC6scZjcyG9SqcHl31u3GIGC4NfhIKwUcpT_zpkZN_h1-qm_xZFm0_HTohOq8CPB-SNWFePf2LCYrAR_8wWGG4nJT1nOCi-BicxBh1sAJvitL3jX2hudU0Q2IGjWVbSibkjkey0nh3Z0t7jKI6Xc0Qcn6uQw.png?alt=media)

#### Styling Settings

You can use the Styling tab to adjust the styling option you want. Check more information about the [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) 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](https://help.pagefly.io/manual/button-element/%233-2-how-to-create-a-dynamic-checkout-button).

### 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

**1. 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.

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

Headings:

##

Paragraph:

Div and Span:

Table:

* Item 1.
* Item 2.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.pagefly.io/page-structure-and-elements/pagefly-elements/basic/html-liquid-element.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.