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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Custom HTML.
- Under General, paste your code into HTML 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 HTML 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 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.
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
Updated on: 26/10/2026
Thank you!