> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Add your own code with Facet's Custom Liquid section

> Use Facet's Custom Liquid section to place Liquid, HTML or an app snippet on any page, and learn how to keep broken code from breaking the page.

The Facet Custom Liquid section places your own code on a page. Use it for an app's embed snippet, a small piece of HTML, or Liquid that shows store data the other sections don't cover. Facet wraps your code in the section's colors, width and spacing. This page covers the code field, the common settings and how to add code safely.

## What this section controls

* The Liquid, HTML or app snippet shown on the page.
* The colors, width and spacing around that code.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Custom Liquid**.

**3. Paste your code**

Click **Custom Liquid** and paste your code into **Liquid code**. Check the preview, then save.

![The theme editor with the Custom Liquid section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/custom-liquid/custom-liquid-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=cce3a70a0b2458c25bbba02233580519)

## Section settings

### Code

![Theme editor sidebar showing the Custom Liquid section settings: Liquid code, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/custom-liquid/custom-liquid-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=e494ac33476fece3e568ff4af7d421b2)

* **Liquid code**: app snippets or other Liquid and HTML. The code is placed on the page as you type it. Liquid in the field can read the same store data as the theme, for example `{{ shop.name }}`, or `{{ product.title }}` on a product page.

> [!WARNING]
>
> Code in this field runs on your live store exactly as written. Broken Liquid, an unclosed HTML tag or a faulty script can show an error, hide the content below it, or break the layout of the whole page. Shopify refuses to save Liquid with a syntax error, but it can't catch code that saves and still misbehaves. Paste code only from sources you trust, and test it on an unpublished copy of your theme first.

### Common settings

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the background and text colors around your code. Code that sets its own colors keeps them.
* **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large.
* **Page width**: Narrow, Narrower, Fluid (default) or Full.

## Best practices

* **Prefer app blocks.** If an app offers an app block or app embed, use that instead of pasting its code. The app maintains that code for you, so it keeps working when the app changes.
* **Test on a copy.** Duplicate your theme in **Online Store**, then **Themes**, add the code there, and check the page on desktop and phone before publishing.
* **Keep a copy of your code.** Save the code somewhere outside Shopify, so you can restore it if the section is deleted or edited by mistake.
* **Add padding for plain text.** The paddings default to none, so text and HTML sit right against the sections above and below. Pick **Small** or larger to give them room.

## Related guides

> [card] [Custom section](https://docs.shopify.lightsout.agency/themes/facet/sections/custom-section.md)
>
> Build a section from theme blocks without code.

> [card] [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md)
>
> How color scheme, padding and page width work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.