Blum Custom Section
Theme: Blum · Section type: All-template section
The Custom Section lets you build your own layout from blocks, such as headings, images, buttons, videos, and groups of blocks. Use it when no other Blum section has the layout you need, without a page builder app.
Note: You can add this section to any template, but not to the Header, Footer, or Overlay groups. A new Custom Section comes with a Heading block and a Description block. The Video option in the Add section list is a Custom Section that starts with a Video block.
What you can do
- Add the section and your blocks
- Arrange blocks with groups
- Set the layout for desktop and mobile
- Add a background image or video
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems
Add the section and your blocks
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Custom Section.
- Under Custom Section, click Add block and pick a block from the list.
- Set up the block. Repeat for each block you need.
- Drag the blocks in the left sidebar to change their order.
- Click Save.
These blocks are available:
Block | What it adds |
|---|---|
Heading | A heading in Small, Medium, or Large size. |
Subheading | Small text above or below a heading. |
Description | A rich text paragraph. |
Button | A button or text link. |
Button group | Several Button blocks side by side or stacked. |
Countdown timer | A countdown to a date and time. |
Icon | An icon from the theme library, a custom image, or a custom SVG. |
Newsletter form | An email field and a subscribe button. |
Page | The content of one of your pages. |
Image | An image with an optional link. |
Video | A YouTube, Vimeo, or Shopify-hosted video. |
Custom HTML | Your own HTML code. |
Custom Liquid | Your own Liquid code. |
Group | A container that holds other blocks with its own layout. |
Tip: You can also add app blocks from your installed apps.
Arrange blocks with groups
A Group block holds other blocks and has its own direction, alignment, size, and background. Use groups to build layouts like an image on the left and text on the right.
- In the Custom Section, click Add block > Group.
- Under the Group, click Add block and add the blocks it should hold.
- In the Group settings, under Desktop layout and Mobile layout, choose a Direction: Vertical stacks the blocks, and Horizontal places them side by side.
- Under Size, set the Width and Height to Fill, Fit, or Custom.
- Optional: under Link, add a link to make the whole group clickable.
- Click Save.
Tip: You can place a Group inside another Group to build more complex layouts. For example, set the section to Horizontal with an Image block and a Group, and set the Group to Vertical with a Heading, a Description, and a Button.
Note: Inherit color scheme is available in Blum 3.8 and later. Check it to give a group the same colors as the section.
Set the layout for desktop and mobile
- Click the Custom Section.
- Under Desktop layout, select a Height and a Direction.
- Set Content alignment, Content position, and Gap. The options change with the direction you choose.
- Under Mobile layout, set the same settings for mobile.
- Under Padding, set the space above and below the section.
- Click Save.
Add a background image or video
- In the Custom Section, under Media, select a Background media: Image or Video.
- For an image, select a Background image. Optional: select a Mobile background image (optional), and check Enable parallax effect.
- For a video, select a Video source, then add an External video URL or a Shopify-hosted video.
- Under General, set the Overlay opacity so the text stays easy to read.
- Click Save.
Tip: Use a 1600 x 800 px image for desktop and a 750 x 1100 px image for mobile.
What customers see
- Layout: the blocks show in the order, direction, and alignment you set. Desktop and mobile can use different layouts.
- Background: a background image or video fills the section behind the blocks, with a mask overlay. With the parallax effect, the image moves as customers scroll.
- Links: customers click a Button, an Image with a link, or a Group with a link to open the page you chose. A Group link doesn't work when the group contains a Button block.
- Newsletter form: customers enter their email address and click the button to subscribe.
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. |
Overlay opacity | Darkens the background image or video so text is easier to read, from 0 % to 90 %. |
Custom mask overlay color | Sets a custom color for the overlay. |
Custom content overlay color | Sets a custom color for the text on the background. |
Enable fullwidth content | Lets the content use the full width of the screen. |
Media
Setting | What it does |
|---|---|
Background media | Adds a background: None, Image, or Video. |
Enable parallax effect | Moves the background image as customers scroll. Appears with Image. |
Parallax direction | Sets how the image moves: Vertical, Horizontal, or Zoom. Appears after you check Enable parallax effect. |
Background image | The background image. 1600 x 800 px .jpg recommended. Appears with Image. |
Mobile background image (optional) | A separate background image for mobile. 750 x 1100 px .jpg recommended. If you don't add one, mobile shows the main image. Appears with Image. |
Video source | Uses an External video (YouTube or Vimeo) or a Shopify-hosted video. Appears with Video. |
External video | The YouTube or Vimeo URL. Appears with External. |
Shopify-hosted | The video file uploaded to Shopify. Appears with Shopify-hosted. |
Enable video loop | Plays the video again when it ends. Appears with Video. |
Desktop layout and Mobile layout
Setting | What it does |
|---|---|
Height | Sets the section height: Hug content, 50% screen, 70% screen, Fill screen, or Adapt to image. |
Direction | Stacks the blocks (Vertical) or places them side by side (Horizontal). |
Content alignment | With Vertical, aligns the blocks Left, Center, or Right. With Horizontal, places the row of blocks Left, Center, Right, or Space Between. |
Content position | With Vertical, places the blocks at the Top, Middle, Bottom, or Space Between. With Horizontal, aligns the blocks to the Top, Middle, or Bottom. |
Gap | Sets the space between blocks, from 0 px to 100 px. |
Padding
Setting | What it does |
|---|---|
Top | Sets the space above the section, from 0 px to 100 px. |
Bottom | Sets the space below the section, from 0 px to 100 px. |
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 at the top Left or top Right. Appears after you enter badge text. |
Shape | Sets the badge shape: Star, Diamond, or Asterisk. Appears after you enter badge text. |
Group block settings
The Group block has the same Media, Desktop layout, Mobile layout, and Padding options as the section, with these differences.
Setting | What it does |
|---|---|
Inherit color scheme | Uses the color scheme of the section for this group. When unchecked, you pick a Color scheme for the group. |
Overlay opacity, Custom mask overlay color, Custom content overlay color | Work like the section settings, for the group background. |
Background media | Adds a background to the group: None, Image, or Video. Groups have no parallax effect. |
Width | Sets the group width on desktop: Fill, Fit, or Custom (0 % to 100 %). |
Mobile width | Sets the group width on mobile: Fill, Fit, or Custom (0 % to 100 %). |
Height | Sets the group height: Fill, Fit, or Custom (0 % to 100 %). |
Top, Bottom, Left, Right | Sets the padding inside the group, from 0 px to 100 px. |
Link | Makes the whole group clickable. The link doesn't work when the group contains a Button block. |
Heading, Subheading, and Description block settings
Setting | What it does |
|---|---|
Text | The text of the block. An empty Heading or Subheading is hidden. |
Heading size | Sets the heading size: Small, Medium, or Large. Heading block only. |
Button and Newsletter form block settings
Setting | What it does |
|---|---|
Label / Button label | The button text. An empty Button label hides the button. |
Style | Sets the button style: Primary, Secondary, or Text link. |
Link | The page the button opens. Button block only. Appears after you enter a label. |
Width and Mobile width | Sets the width of the Newsletter form: Fill, Fit, or Custom (0 % to 100 %). Newsletter form block only. |
Button group block settings
Setting | What it does |
|---|---|
Direction | Stacks the buttons (Vertical) or places them side by side (Horizontal), on desktop and on mobile. |
Width and Mobile width | Sets the width of the group: Fill, Fit, or Custom (0 % to 100 %). |
Countdown timer block settings
Setting | What it does |
|---|---|
Hide the countdown when it ends | Hides the timer after the end date. |
End date | The end date, in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight. The time zone comes from your store settings. |
End time (optional) | The end time, in the format HH:MM (24-hour clock). |
End text | The text shown when the countdown ends. Leave it empty to hide it. |
End text color | Sets the color of the end text. |
Icon block settings
Setting | What it does |
|---|---|
Icon source | Uses an icon from the Theme library, a Custom image, or a Custom SVG. |
Theme library | The icon from the theme library. Appears with Theme library. |
Custom image | A square image to use as the icon. Appears with Custom image. |
Custom SVG | Your SVG code. Appears with Custom SVG. |
Custom icon color | Sets a custom color for the icon. |
Width | Sets the icon size, from 16 px to 100 px. The height always matches the width. |
Image block settings
Setting | What it does |
|---|---|
Image | The image. |
Image ratio | Sets the image shape: Square (1:1), Portrait (2:3), Landscape (3:2), or Auto. |
Width | Sets the image width on desktop, from 10 % to 100 %. |
Mobile width | Sets the image width on mobile, from 10 % to 100 %. |
Height | Fills the space (Fill) or keeps the image size (Fit). Appears with Auto. |
Link | Makes the whole image clickable. |
Video block settings
Setting | What it does |
|---|---|
Video source | Uses an External video (YouTube or Vimeo) or a Shopify-hosted video. |
External video | The YouTube or Vimeo URL. Appears with External. |
Shopify-hosted | The video file uploaded to Shopify. Appears with Shopify-hosted. |
Aspect ratio | Sets the video shape: 16:9, 4:3, or Original. |
Video thumbnail | An image shown before the video plays. |
Enable video mute | Plays the video without sound. |
Enable video loop | Plays the video again when it ends. |
Width | Sets the video width on desktop, from 10 % to 100 %. |
Mobile width | Sets the video width on mobile, from 10 % to 100 %. |
Page, Custom HTML, and Custom Liquid block settings
Setting | What it does |
|---|---|
Page | The page whose content the Page block shows. |
HTML code | Your HTML code. Custom HTML block only. |
Liquid code | Your Liquid code. Custom Liquid block only. |
Troubleshooting
The link on my Group doesn't work.
A Group link is turned off when the group contains a Button block. Remove the Button, or use the Button's own link.
My layout looks different on mobile.
Desktop and mobile have separate layout settings. Set Mobile layout in the section, and Mobile layout and Mobile width in each Group.
I can't find "Parallax direction".
It appears only when Background media is Image and Enable parallax effect is checked. Groups don't have a parallax effect.
The text is hard to read on my background image.
Increase Overlay opacity, or set a Custom mask overlay color and a Custom content overlay color.
Related articles
- Blum Custom HTML
- Blum Custom Liquid
- Blum Image With Text
- Blum What Icons Can Be Used On Blum Theme
- Blum All-Template Sections
Updated on: 26/10/2026
Thank you!