Custom HTML / Liquid section
The Custom HTML / Liquid section in Seventh holds your own HTML or Liquid code, or any theme block, with the standard section design.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Custom HTML / Liquid section adds your own HTML or Liquid code to a page, inside the standard Seventh section frame. Use it for embed codes from external services, such as a booking form or a map, on any page.
Where to find it: select Add section in the theme editor, then choose Custom HTML / Liquid (Add section category Custom).
Krown support does not provide help with custom code. Code in this section can break the page layout or the store. Use it only if you know HTML and Liquid, and test on a preview theme first.
What the section contains
- The preset adds one Custom HTML / Liquid block, which holds the code. The code and its settings are on the block; see Custom HTML / Liquid block.
- The section also accepts any other theme block, so you can add a Heading or Text block above the code.
- It has no section header and no layout settings of its own: only the standard Section design settings and its own full-width checkbox, listed below.
Why does nothing show in my Custom HTML / Liquid section?
The code does not output anything on that page, or it contains an error. Check these in order:
- The code is in the Custom HTML / Liquid block inside the section, and the block is not hidden.
- The HTML is complete: every opening tag has its closing tag.
For more checks, see Troubleshoot Online Store Issue - first steps.
Can Krown support write or fix the code for me?
No. Seventh does not support custom code changes through Krown support. See Custom work and code changes for your options. Code that must load on every page belongs in the theme's head instead; see Custom CSS and code.
All Custom HTML / Liquid settings
Every setting in this group, with its type and default.
Accepts these blocks: any theme block.
Custom HTML / Liquid section: Section design
Where to find it: Custom HTML / Liquid → Section design
The Custom HTML / Liquid section uses the standard Section design settings, listed in General section styling.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Extend section width to the edges of the screen (checkbox, default: off): Removes the page container around the code, so the content can use the full width of the browser window.
These settings differ from the standard ones or exist only here:
Extend section width to the edges of the screen (checkbox, default: off): Removes the page container around the code, so the content can use the full width of the browser window.
Related pages
- Custom HTML / Liquid block: the block that holds the code.
- Apps section: for app blocks from installed apps, which need no code.
- Custom work and code changes: what to do when a change needs code.
- General section styling: the Section design settings this section shares with others.