Custom liquid

Overview

The Custom Liquid section allows you to insert custom Liquid, HTML, and inline CSS directly inside the theme editor.

It is designed for small, flexible customizations without modifying theme files. The content is rendered exactly as written inside the section wrapper and inherits the selected color scheme and padding.

This section is ideal for quick enhancements or advanced users who need additional dynamic output.

Where to use this section

Use this section when you need:

Custom dynamic content not supported by built-in sections
Conditional Liquid logic
Third-party embed snippets (apps, widgets)
Small promotional blocks with custom markup
Store-specific custom messages

Common placements:

Homepage
Product template
Collection template
Landing pages
Announcement sections

How to add this section

Open Theme Editor.
Navigate to the template where you want to add custom content.
Click Add section → select Custom Liquid.
Paste your Liquid/HTML/CSS code into the Custom Liquid field.
Adjust Color scheme and Padding if needed.

How it works

The section outputs:

<div class="color-{{ color_scheme }} gradient">
  <div class="section-{{ section.id }}-padding">
    {{ custom_liquid }}
  </div>
</div>

Key behavior:

Your code is rendered directly via {{ section.settings.custom_liquid }}
Padding is responsive:
- Mobile = 75% of padding value
- Desktop = 100% of padding value
The section inherits the selected color scheme
No additional layout structure is added — you control the markup

Section settings

Custom Liquid (custom_liquid)
- Accepts Liquid, HTML, and inline CSS
- Outputs exactly as written

Colors

Color scheme (color_scheme)
- Applies background + text styling via theme color scheme classes

Spacing

Padding top
Padding bottom
- Responsive behavior (mobile reduced automatically)

Limitations

No validation: invalid Liquid or HTML may break the layout.
No block structure: this is a single content field.
No built-in responsive controls (you must handle layout yourself).
Large scripts or complex features should be implemented as a proper section/snippet instead.
Some Shopify objects are only available on specific templates (e.g., product, collection).

Common use cases

Output customer-based messages:

{% if customer %}
  <p>Welcome back, {{ customer.first_name }}!</p>
{% endif %}

Display dynamic metafields
Insert third-party app embeds
Add temporary promotional messages
Create quick custom layout tweaks without editing theme files

Tips for best results

Wrap your code in a unique container class to avoid CSS conflicts.
Scope any custom CSS carefully.
Keep snippets small and focused.
Use conditional logic to avoid errors when objects don’t exist.
Test on multiple templates if using Liquid objects.

Common mistakes

Adding global CSS that unintentionally affects the entire site.
Using objects like product on a non-product template.
Pasting untrusted script code.
Building large components instead of creating a proper section/snippet.

When to create a proper section instead

Use a dedicated section/snippet if:

You need multiple configurable settings
The layout is reusable
The feature is complex
You need structured blocks

Custom Liquid is best for lightweight customization, not full feature development.

Need help?

If your custom Liquid breaks the layout or you’re unsure why something doesn’t render:

Please include:

The code you inserted
The template where it’s used
A screenshot of the issue

Submit a support request and we’ll help you review it.