Skip to main content

Liquid

With the Custom Liquid section, you can load your own custom-written Liquid, HTML, CSS, or JavaScript code directly into your page. This is an extremely powerful tool for advanced users and developers who want to add specific, custom-made features or external widgets (such as iframes, forms, or special video players) that are not included in the theme by default.

Entering Code​

  • Custom Liquid: Paste your code here. You can write regular HTML here, but you also have full access to Shopify's Liquid variables to fetch and display dynamic content.

General Layout & Background​

Even though you are writing your own code, you can still take advantage of the powerful layout options of the Inspire theme to make your code blend seamlessly into the page:

  • Color scheme: Choose a fitting color scheme for the background and default text color of this section.
  • Section display (Type): Determine whether the background of the section spans the full width of the screen (Full width / Edge-to-edge) or is tightly centered within a frame (Box / Container).
  • Height & Background height: Choose whether the section should automatically grow with the content of your code (Auto) or work with a fixed height (Fixed). If you choose a fixed height, a slider (0-100%) appears that allows you to set exactly how far the background color extends, separately for desktop and mobile.
  • Custom Class: Add your own CSS class to specifically style the section (or elements within your code) further via your stylesheet.

Spacing (Whitespace)​

Ensure your custom-made section connects perfectly to the elements above and below it:

  • Margin (Outer space): Manage the distance directly outside the section at the top and bottom.
  • Padding (Inner space): Manage the distance inside the section for the top and bottom.

For each of these settings, you can choose the default spacing of the theme, or omit the space completely (None).