Custom Liquid
A section for your own HTML and Liquid, or an app's snippet, without editing theme files.
What it does
Renders the HTML and Liquid you paste into it, inside a section with a color scheme, a
width and padding. Liquid objects such as product, collection and shop are
available where the template provides them.
When to use it
An embed code from a third party, a snippet an app asks you to paste, a piece of HTML the sections cannot produce. Try a Custom section with blocks first; reach for code when blocks do not do it.
Setting it up
- Paste the code into Liquid code.
- Set Color scheme and Width to match the sections around it.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Liquid code | Liquid | The HTML or Liquid to render, such as an embed code or an app snippet. |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 40 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 40 |
Tips
- Custom Liquid is the supported way to add code. It lives in the template, survives theme updates, and is covered by support as far as the theme around it is concerned. Code you paste is your own.
- There is a Custom Liquid block as well, for the buy box and for the Custom section, when the code belongs inside another section.
- The code runs with the section's color scheme and padding around it, so a widget picks up your colors when it uses the theme's CSS variables.