Blum Custom Liquid
Theme: Blum · Section type: All-template section
The Custom Liquid section adds your own Liquid code to a page, with an optional heading and description in the theme's style. Use it to show store data, such as product or collection details, in a way that no other section offers, or to add an app snippet.
Note: You can add this section to any template. The Liquid code can also contain HTML, CSS, and JavaScript. For plain HTML, you can also use the Custom HTML section.
What you can do
- Add the section and your Liquid code
- Add a heading and a prominent badge
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems
Add the section and your Liquid code
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Custom Liquid.
- Under General, paste your code into Liquid code.
- Click Save.
Caution: Code you paste here runs on your live store. Only use code from sources you trust, and check the page on desktop and mobile after you save.
Add a heading and a prominent badge
- In the Custom Liquid section, under General, enter a Section subheading, a Section heading, and a Section description. Leave a field empty to hide it.
- Optional: under Prominent badge, enter a Text, then choose the Accent scheme, Position, and Shape.
- Click Save.
What customers see
- Content: the subheading, heading, and description appear above the output of your code, in the theme's fonts and colors.
- Your code: the output of your Liquid code shows below the heading. Its layout on mobile depends on your code.
- Badge: if you add badge text, a small tilted badge in the shape you chose shows below the heading area.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the background and text colors of the section. You edit color schemes in Theme settings > Colors. |
Section subheading | Small text above the heading. |
Section heading | The main heading of the section. |
Section description | A short text below the heading. |
Liquid code | The Liquid code to run. It can include HTML, CSS, and JavaScript. |
Layout
Setting | What it does |
|---|---|
Remove padding top | Removes the space above the section. |
Remove padding bottom | Removes the space below the section. |
Prominent badge
Setting | What it does |
|---|---|
Text | The badge text. Leave it empty to hide the badge. |
Accent scheme | Sets the badge colors: Main or Extra. Appears after you enter badge text. |
Position | Places the badge below the heading area, on the Left or the Right. Appears after you enter badge text. |
Shape | Sets the badge shape: Star, Diamond, or Asterisk. Appears after you enter badge text. |
Troubleshooting
The editor won't save my code.
Shopify checks Liquid code when you save. If the code has a syntax error, for example a missing closing tag, fix the error shown in the editor and save again.
My code shows nothing on some pages.
Some Liquid objects exist only on certain templates. For example, the product object works on product pages, not on the homepage. Add the section to the template where the data exists.
The section breaks the layout of my page.
Check your code for unclosed HTML tags. An unclosed tag can affect the sections below it.
The prominent badge doesn't show.
The badge shows only when the section has a Section subheading, Section heading, or Section description. Add one of them, then check the badge Text.
There is a heading I don't want above my code.
Clear the Section heading field. Empty text fields are hidden.
Related articles
Updated on: 26/10/2026
Thank you!