Custom Liquid settings

The Custom Liquid section is a versatile tool for adding Liquid code to websites, enabling complete content customization. It allows developers to create reusable, enhancing functionality and extending Liquid’s capabilities, particularly in platforms like Shopify, for more flexible and efficient web page rendering. It can be used for:

Creating reusable product display blocks
Generating dynamic navigation menus
Building complex form components
Implementing conditional rendering of content
Standardizing layout and design patterns across a website

Customizing with Liquid Code (Learn more)

You have the flexibility to enhance your sections with custom Liquid code. There are two ways to do this:

Incorporate App Snippets: You can include app snippets provided in your app instructions to integrate apps seamlessly into your pages.
Direct Liquid Code: Alternatively, you can directly insert custom Liquid code into the editor for more advanced customizations.

How to access Custom Liquid section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
From any page, click “Add section”
Search and select “Custom Liquid”

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure Custom Liquid section

Basic Components

The Custom Liquid section includes 1 default component, which is the Custom liquid itself.

To begin customizing, click the “Custom Liquid” section to access its settings.

Section settings

Setting	Description
Color scheme	A set of colors that you can apply to this section. Learn more about color schemes.

Section padding

Setting	Description
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The “Top padding mobile” setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The “Bottom padding mobile” setting works similarly to the “Top padding mobile” setting, but controls the space at the bottom of the section for mobile devices.