> ## 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 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.
![Custom Section with three groups side by side on desktop](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/customsection-1_ndzpuz.png)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Custom Section**.
3. Under **Custom Section**, click **Add block** and pick a block from the list.
4. Set up the block. Repeat for each block you need.
5. Drag the blocks in the left sidebar to change their order.
6. 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.

1. In the **Custom Section**, click **Add block** > **Group**.
2. Under the Group, click **Add block** and add the blocks it should hold.
3. In the Group settings, under **Desktop layout** and **Mobile layout**, choose a **Direction**: **Vertical** stacks the blocks, and **Horizontal** places them side by side.
4. Under **Size**, set the **Width** and **Height** to **Fill**, **Fit**, or **Custom**.
5. Optional: under **Link**, add a link to make the whole group clickable.
6. 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
1. Click the **Custom Section**.
2. Under **Desktop layout**, select a **Height** and a **Direction**.
3. Set **Content alignment**, **Content position**, and **Gap**. The options change with the direction you choose.
4. Under **Mobile layout**, set the same settings for mobile.
5. Under **Padding**, set the space above and below the section.
6. Click **Save**.

## Add a background image or video
1. In the **Custom Section**, under **Media**, select a **Background media**: **Image** or **Video**.
2. For an image, select a **Background image**. Optional: select a **Mobile background image (optional)**, and check **Enable parallax effect**.
3. For a video, select a **Video source**, then add an **External video** URL or a **Shopify-hosted** video.
4. Under **General**, set the **Overlay opacity** so the text stays easy to read.
5. 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.
![The same Custom Section on mobile, with the groups stacked](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/customsection-2_1ut9zo2.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. |
| 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](https://doc.ecomx.co/en/article/blum-custom-html-n69d41/)
- [Blum Custom Liquid](https://doc.ecomx.co/en/article/blum-custom-liquid-1efyr6h/)
- [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/)
- [Blum What Icons Can Be Used On Blum Theme](https://doc.ecomx.co/en/article/blum-what-icons-can-be-used-on-blum-theme-jnfsrj/)
- [Blum All-Template Sections](https://doc.ecomx.co/en/article/blum-all-template-sections-jwz099/)