# 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
{% endhint %}

With the **Custom Liquid** block, 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 block

***

Under **Product overview**, click **(+) Add block** and select **Custom Liquid**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start customizing.

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

`Click Custom Liquid block to find settings`

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Custom Liquid</mark></td><td><p>Add custom Liquid code for apps or custom content.</p><p>See Shopify's <a href="https://shopify.dev/docs/api/liquid">Liquid reference guide</a> and <a href="https://shopify.github.io/liquid-code-examples/">Liquid code examples</a> to learn more.</p></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

`Click Custom Liquid block to find settings`

<table><thead><tr><th width="185">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p></td></tr></tbody></table>