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.

Last updated

Was this helpful?