# 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 an unpublished copy of your theme. For assistance, we recommend finding a professional developer through [Shopify Experts](https://experts.shopify.com/) or [Task Husky](https://account.taskhusky.com/aff.php?aff=153\&page=fluorescent).
{% 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.

## **Add Custom Liquid section**

Follow the steps below to add Custom Liquid section and test your custom code.

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> 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 %}

<details>

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

In your **Shopify admin**:

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

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

1. Open a **Template**.
2. Under **Template**, click **(+) Add section** and select **Custom Liquid**.
3. Click the **Custom Liquid** section to open the settings.
4. Enter your HTML or Liquid code into the Custom Liquid field.

   > Refer to Shopify's [Liquid reference guide](https://shopify.dev/docs/api/liquid) to learn more.
5. Click **Save**.
6. Click **Preview** to review your changes.

   > Use the preview link to further test your changes on multiple browsers and devices.
7. After testing, you can **Publish** the theme with your changes.

</details>

## **Add anchor links to sections**

{% hint style="info" %} <mark style="color:green;">**Shopify**</mark> | 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.

   ![](https://github.com/fluorescent/kb-lorenza/blob/main/.gitbook/assets/liquid-link-span.png)
5. Click the **Custom CSS** tab, and enter the code below to remove section padding:

   > **`div {padding: 0px; margin: 0px;}`**

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-7727539a3baf956a9d5b78513289a50ff18786b2%2Fliquid-link-css.jpeg?alt=media)
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`**).

   ![](https://github.com/fluorescent/kb-lorenza/blob/main/.gitbook/assets/liquid-link-button.png)
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](https://help.fluorescent.co/lorenza/general/editing-themes)\
> [Custom Liquid](https://help.fluorescent.co/lorenza/for-developers/custom-liquid)\
> [Custom CSS](https://help.fluorescent.co/lorenza/for-developers/custom-css)\
> [Custom fonts](https://help.fluorescent.co/lorenza/for-developers/custom-fonts)