> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Custom Liquid**.
3. Under **General**, paste your code into **Liquid code**.
4. 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
1. 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.
2. Optional: under **Prominent badge**, enter a **Text**, then choose the **Accent scheme**, **Position**, and **Shape**.
3. 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
- [Blum Custom HTML](https://doc.ecomx.co/en/article/blum-custom-html-n69d41/)
- [Blum Custom Section](https://doc.ecomx.co/en/article/blum-custom-section-fmpkw1/)
- [Blum All-Template Sections](https://doc.ecomx.co/en/article/blum-all-template-sections-jwz099/)
- [Blum Text Section](https://doc.ecomx.co/en/article/blum-text-section-1hbal5p/)