# 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.