> ## 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 HTML

**Theme:** Blum · **Section type:** All-template section

The Custom HTML section adds your own HTML code to a page, with an optional heading and description in the theme's style. Use it to embed a widget, a form, or a design that no other section offers.

> **Note:** You can add this section to any template. It runs HTML, CSS, and JavaScript. To use Liquid code, such as product or customer data, use the Custom Liquid section instead.
![Custom HTML code that adds an animated strip of images on a page](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/customhtml-1_12mxk56.png)

**What you can do**
- Add the section and your HTML 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 HTML code
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Custom HTML**.
3. Under **General**, paste your code into **HTML 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 HTML** 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 your HTML output, in the theme's fonts and colors.
- **Your code:** the HTML shows exactly as you wrote it. 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.
![The same Custom HTML output on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/customhtml-2_j4r4ev.png)

## 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. |
| HTML code | The HTML code to show. |

### 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
**My code shows as plain text or doesn't work.**
The **HTML code** field doesn't run Liquid code (code with {{ }} or {% %}). Use the Custom Liquid section for Liquid.

**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 Liquid](https://doc.ecomx.co/en/article/blum-custom-liquid-1efyr6h/)
- [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/)