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

# Custom Liquid

> Add custom Liquid code snippets for advanced customizations and app integrations.

The Custom Liquid section allows you to add custom Liquid code, app snippets, or advanced customizations directly into your theme. This section provides developers and advanced users the flexibility to extend theme functionality.

<img src="https://mintcdn.com/digifist/zYxYXGt6LOe3iDOD/images/theme/release/sections/custom-liquid/custom-liquid-overview.png?fit=max&auto=format&n=zYxYXGt6LOe3iDOD&q=85&s=bdb286493e9a736473b0ea0aebed7ed7" alt="Custom liquid section overview" width="3280" height="2186" data-path="images/theme/release/sections/custom-liquid/custom-liquid-overview.png" />

## What this section controls

* Custom Liquid code editor
* Section width and container options
* Color scheme selection
* Vertical spacing control
* Direct HTML/Liquid output

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Custom Liquid section">
    Add the section where you need custom code.
  </Step>

  <Step title="Write Liquid code">
    Enter your custom Liquid, HTML, or app snippet code.
  </Step>

  <Step title="Configure container">
    Set section width, color scheme, and spacing.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/a3T1bsB0PIZHGPeB/images/theme/release/sections/custom-liquid/custom-liquid-location.png?fit=max&auto=format&n=a3T1bsB0PIZHGPeB&q=85&s=f9a0d71d1fa53052e2725126f9e8c844" alt="Custom liquid in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/custom-liquid/custom-liquid-location.png" />

## Section settings

<Tabs>
  <Tab title="Code">
    ### Liquid

    Custom Liquid code editor.

    * Full Liquid syntax support
    * HTML allowed
    * App snippet integration

    <Note>
      Add app snippets or other Liquid code to create advanced customizations.
    </Note>

    <Warning>
      Invalid Liquid code can break your theme. Always test in a duplicate theme first.
    </Warning>

    <img src="https://mintcdn.com/digifist/zYxYXGt6LOe3iDOD/images/theme/release/sections/custom-liquid/liquid-editor.png?fit=max&auto=format&n=zYxYXGt6LOe3iDOD&q=85&s=53a91dc1da1603a6c4a4083defec8dcf" alt="Liquid code editor" width="3280" height="2186" data-path="images/theme/release/sections/custom-liquid/liquid-editor.png" />
  </Tab>

  <Tab title="Settings">
    ### Section width

    Maximum width of content container.

    **Available options:**

    * **Page:** Standard page width
    * **Narrower:** Narrower than page
    * **Fluid:** Wider than page
    * **Full:** Full viewport width

    **Default:** Page

    ### Color scheme

    Background and text colors for the section.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    ### Spacing top

    Space above section.

    **Available options:** None, S, M, L, XL

    **Default:** M

    ### Spacing bottom

    Space below section.

    **Available options:** None, S, M, L, XL

    **Default:** M

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/custom-liquid/section-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=bb70f9072e92819bf1bac4cbb8554601" alt="Section settings" width="3280" height="2186" data-path="images/theme/release/sections/custom-liquid/section-settings.png" />
  </Tab>
</Tabs>

## Best practices

* Always test custom Liquid code in a duplicate theme before applying to live store
* Use proper Liquid syntax and validate code before publishing
* Comment your code for future reference and maintainability
* Keep code organized and indented for readability
* Test on multiple devices and browsers after adding custom code
* Use section width "Full" when creating full-width custom layouts
* Avoid complex logic that could slow down page load times
* Follow Shopify's Liquid best practices and coding standards
* Use app snippets from trusted Shopify apps only
* Document what custom code does for future maintenance

## Common use cases

* **App integrations** - Add third-party app widgets and functionality
* **Custom HTML widgets** - Insert custom HTML elements not available in theme
* **Advanced product displays** - Create custom product layouts with Liquid
* **Custom forms** - Build specialized contact or registration forms
* **External embeds** - Integrate external services and tools
* **Custom data display** - Show metafields or custom product data
* **Analytics tracking** - Add custom tracking scripts (use responsibly)
* **A/B testing** - Implement custom A/B testing code

## Liquid resources

<CardGroup cols={2}>
  <Card title="Shopify Liquid Reference" icon="book" href="https://shopify.dev/docs/api/liquid">
    Official Liquid documentation
  </Card>

  <Card title="Theme Development" icon="code" href="https://shopify.dev/docs/themes">
    Shopify theme development docs
  </Card>
</CardGroup>

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>