# 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** section, you can extend your theme by adding snippets of Liquid or HTML code as a section in the theme editor.

The Custom Liquid section 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.

## Add Custom Liquid

***

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

{% hint style="info" %}
See Shopify's [Liquid reference guide](https://shopify.dev/docs/api/liquid) and [Liquid code examples](https://shopify.github.io/liquid-code-examples/) to learn more.
{% endhint %}

 

## **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.
5. Under **Section style**, set the **Padding** to **None**.
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`**).
8. Click **Save**.

</details>