> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/advanced/custom-liquid.md).

# Custom Liquid

**Custom Liquid** is a section that renders code you paste into it, so you can extend the theme without touching its files. It is the usual home for app snippets, a small piece of markup an agency gave you, or a one off element the built in sections do not offer. Shoppers see whatever your code outputs, placed exactly where you drag the section in the template, with the theme width and color scheme applied around it.

Because the code lives in a section rather than in the theme files, it survives theme updates and can be removed by deleting the section.

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template where the code should appear, for example the homepage or a product page.
3. Click **Add section**.
4. Open the **Advanced** group and choose **Custom Liquid**.
5. Paste your code into the **Custom Liquid** field, then drag the section into position.
   {% endhint %}

*Result:* the preview reloads and renders your code in place. If nothing appears, the code produced no visible output, which is normal for tracking snippets.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-settings" id="general-settings"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far this section spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the content runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the content lines up with the page width set in <strong>Theme settings > Layout</strong>, so your code sits on the same grid as the sections above and below it.</li><li><strong>Full width</strong>: the section fills the whole browser window and resizes with it.</li></ul> |
| **Color scheme**  | The background and text colors applied around your code. Schemes come from **Theme settings > Colors**, so picking the same one as the neighbouring section makes custom code blend in rather than stand out.                                                                                                                                                                                                                                                                             |
| **Custom Liquid** | The field your code goes into. It accepts Liquid, HTML, and app snippets, and it is the only part of this section shoppers actually see.                                                                                                                                                                                                                                                                                                                                                  |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Space added above your code. Increase it when the section presses against whatever sits before it.                  |
| **Bottom** | Space added below your code. Set both to zero when the snippet is invisible, so it leaves no empty gap on the page. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see the output of your code at the position you dragged the section to, nothing more.
* A snippet with no visible output still occupies the padding you set, which can look like an unexplained gap. Set **Top** and **Bottom** to zero for those.
* Deleting the section removes the code from the storefront immediately, with no theme file to clean up afterwards.
* The **Custom Liquid** field supports Shopify Liquid objects and tags, allowing you to display dynamic store data available in the current template context.
* The field has no character limit and supports inline `<style>` and `<script>` tags. Invalid Liquid, CSS, or JavaScript may affect the storefront, so test custom code before publishing.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Advanced](/velare/customize-your-pages/advanced.md): the group this section belongs to
* [Custom Liquid block](/velare/customize-your-pages/custom/custom-liquid.md): the block version, for code that belongs inside another section rather than on its own
* [Custom CSS](/velare/customize-your-pages/custom-css.md): for styling rules that should apply store wide
* [Layout](/velare/set-up-your-store/layout.md) and [Colors](/velare/set-up-your-store/colors.md): where the width and scheme options come from


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/advanced/custom-liquid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.