> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/for-developers/custom-liquid.md).

# Custom Liquid

{% hint style="warning" %}
**We do not support code customizations**. This guide offers a basic reference for developers and advanced users familiar with HTML and Liquid. Always test code changes on unpublished theme copies. For assistance, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co/).
{% endhint %}

With the **Custom Liquid** setting, you can extend your theme by adding snippets of Liquid or HTML code as a block or section in the theme editor.

The Custom Liquid block provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code.

{% hint style="success" %}
Liquid is the template language used by Shopify. See their [Liquid reference guide](https://shopify.dev/docs/api/liquid) to learn more. Also check out Shopify's [Liquid code examples](https://shopify.github.io/liquid-code-examples/).
{% endhint %}

## **Add Custom Liquid section**

***

**In your Shopify admin**:

1. Click **Duplicate** on your current theme.
2. Click **Customize** on the duplicated, unpublished theme version.

**In your theme editor:**

Click **(+) Add section** and select **Custom Liquid**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the section to start customizing.

## **Add anchor links to sections**

***

{% hint style="info" %}
Shopify dynamically generates ids for sections but these ids are not stable. The following instructions are a workaround for this platform limitation.
{% endhint %}

To link to a specific section on a page, you can use a **Custom Liquid** section with some HTML as a workaround. The HTML will include a special **`id`** property that will allow you to link directly to that section.

Once set up, the Custom Liquid section will not affect the page layout.

{% hint style="warning" %}
**Anchor link in the Header doesn't work?**

If your anchor link in the navigation menu points to a section on the same page, you will need to disable page transitions for the link to work. Go to **Theme settings > Animation** and deselect **Enable page transitions**.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Template**, click **(+) Add section** and select **Custom Liquid**.
2. Click and hold the drag and drop handles **`⋮⋮`** to move the Custom Liquid section directly above the section you want to link to.
3. Click the **Custom Liquid** section to open the settings.
4. Enter the following HTML code and enter a unique **`id`** property in the opening tag. If using multiple words, you must use dashes (`-`) instead of spaces.

   > **`<span id="our-values"></span>`**

   > Recommended: Use an ID that's the same name as your section, and make sure the name is not used by other IDs.

   ![](/files/TMHNUgnm1UgUgBjGNRJw)
5. Under **Section style**, move the **Top spacing** and **Bottom spacing** sliders to `0px` to remove any whitespace from appearing on the page.
6. Find and click the section or block that will link *to* the Custom Liquid section.
7. In the link field, enter the **`id`** with a hashmark at the start (e.g. **`#our-values`**).

   > To **link from another page or menu link**, you must enter the full URL path with the anchor link at the end (e.g. **`www.store.com/#our-values`** or **`www.store.com/about#our-values`**).

   ![](/files/mdLnOJCFqXRC3JszRKZ0)
8. <mark style="background-color:orange;">If adding the anchor link to the navigation menu</mark>, you will need to disable **Page transitions** in **Theme settings > Animation**. Otherwise, the link will not work for sections that are on the current page.
9. Click **Save**.

</details>

\\

***

> **Related links**
>
> [Edit theme JavaScript](/cornerstone/general/editing-themes.md)\
> [Custom Liquid](/cornerstone/for-developers/custom-liquid.md)\
> [Custom CSS](/cornerstone/for-developers/custom-css.md)\
> [Custom fonts](/cornerstone/for-developers/custom-fonts.md)