Skip to content

Custom liquid

This guide describes setting the Custom liquid section.

Use the section to add Liquid code, like app snippets, to create advanced customizations for your store. Refer to Shopify developers: Liquid reference We recommend hiring an expert if you're not comfortable editing Liquid code.

An example Custom liquid section on a store's homepage.

In the previous image, a Custom liquid section is displayed on a store's homepage. On the left, in the section settings, the Custom liquid box contains Liquid template language code. At the top of the homepage, the Liquid code is rendered as a paragraph of text.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks

Set up a custom liquid section

To set up a custom liquid section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a custom liquid section.

    Note

    The custom liquid section can be added into any page, except Checkout and Giftcard pages. To add a custom liquid section into the current page, select Add section > Custom liquid. Refer to Shopify help: Add a section

  2. From the side menu, select Custom liquid.

    The Custom liquid section selected in Theme editor.

  3. Select a section setting described in the following table.

Section setting nameDescription
Custom liquidIn the Custom liquid box, enter Liquid template language code. Refer to Learning Liquid: A guide to Shopify theme development
Learn about LiquidFollow the link to Learn about Liquid at Shopify developers: Liquid reference
Color > Color schemeUse the Color scheme dropdown to set the section's color scheme to Primary, Secondary, or Tertiary. Refer to Colors.
Color > Disable transitionSelect the checkbox Disable transition to turn on/ off overriding any color transitions set in the section's theme settings. Setup defaults for this setting in Theme Settings > Colors > Transitions.
Spacing > Remove top paddingSelect the checkbox Remove top padding to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding
Spacing > Remove bottom paddingSelect the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding
Advanced > Suppress section wrapperSelect the checkbox Suppress section wrapper to turn on/off spacing, colors, and containers for displaying the Custom liquid box's contents, inside the section.
Remove sectionSelect Remove section to delete the section from the current page.