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.