Skip to content
Custom liquid
Section overview
The Custom liquid section allows developers to insert custom liquid code directly into a page with configurable styling and spacing options.
Common use cases
- Adding custom shop information or dynamic content
- Integrating third-party scripts or widgets
- Creating custom HTML structures not available through standard sections
- Implementing advanced liquid logic for specialized functionality
Usage tips
- Keep liquid code clean and well-structured to maintain readability
- Test your liquid code thoroughly before publishing to ensure it displays correctly
- Consider mobile responsiveness by using responsive classes where needed
- Avoid excessive JavaScript that might slow down page performance
Section settings
| Setting | Description |
|---|---|
| Liquid | Custom liquid code to be rendered in this section. Default value is a span containing the shop name. |
| Top spacing | Controls the padding at the top of the section (0-300px, default: 300px). |
| Bottom spacing | Controls the padding at the bottom of the section (0-300px, default: 300px). |
| Color scheme | Determines the background color scheme. Options include body, neutral, accent colors, shades, and primary/secondary/tertiary colors. |
| Custom color | Sets a custom background color when "Custom" color scheme is selected. Default: #ffffff. |
| Text color | Controls the text color. Options include default (automatic), force light, or force dark. |
| Border color | Sets the color of any borders. Options include subtle or strong. |
| Enable color fade | When enabled, the section's background and text colors will transition smoothly as the user scrolls. |
| Border position | Determines where borders appear. Options include none, top, bottom, or top and bottom. |
| Enable margin | When enabled, applies horizontal margin to the section content. |
| Visibility | Controls when the section is visible. Options include all devices, mobile only, or desktop only. |
Block settings
This section does not include any blocks.