Custom Section

The Custom Section is a universal flexible section that allows you to create fully customized layouts. It supports all block types, giving you complete freedom to design unique page structures that fit any content need.

As the core component of the theme’s section rendering system, it ensures smooth integration and consistency across the entire site. This section is ideal for advanced users who want maximum control over layout and composition.

Some of the layouts you can create include Lookbook, Banner with text, Accordion, Email Signup, etc.

There are 2 ways to add a Section to your store

1. Add a pre-made section from our demo?

Read the instructions here

2. Add the Custom Section section manually?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• In the Templates -> Add section -> find and choose Custom Section.

Custom Section - Settings Guide

This guide explains all available settings for the Custom Section in order from top to bottom as they appear in the Theme Editor.

The settings listed here will help you adjust:

• Advanced Layout

  • Flexbox-based layout system

  • Separate mobile and desktop direction controls

  • Multiple alignment options for different scenarios

  • Responsive gap controls

• Rich Media

  • Background images with positioning controls

  • Background videos with cover/contain options

  • Overlay system with gradient support

• Customization Options

  • Full padding control

  • Border styling with radius support

  • Color scheme inheritance

  • Custom dimensions (width/height)

Custom Section - Settings Guide

Layout & Direction Settings

Setting	Type	Default	Options	Description
Content Direction	select	"column"	column, row, column-reverse, row-reverse	Main content flow direction
Content Direction (Mobile)	select	"column"	column, row, column-reverse, row-reverse	Mobile content flow direction
Horizontal Alignment	select	"flex-start"	flex-start, center, flex-end, space-between, space-around, space-evenly	Horizontal alignment of content
Vertical Alignment	select	"center"	flex-start, center, flex-end, stretch	Vertical alignment of content
Horizontal Alignment (Column)	select	"flex-start"	flex-start, center, flex-end	Horizontal alignment when direction is column
Vertical Alignment (Column)	select	"center"	flex-start, center, flex-end, stretch	Vertical alignment when direction is column
Gap	range	32	0-100px (step: 1)	Gap between child elements

Section Dimensions Settings

Setting	Type	Default	Options	Visibility	Description
Section Width	select	"page-width"	page-width, full-width, custom	-	Section container width
Page Width Custom	range	1570	1000-2000px (step: 10)	Section Width is "custom"	Custom page width
Section Height	select	""	auto, adapt_image, small, medium, large, full-screen, custom	-	Section height behavior
Section Height Custom	range	50	0-100% (step: 1)	Section Height is "custom"	Custom section height percentage

Appearance Settings

Setting	Type	Default	Options	Visibility	Description
Color Scheme	color_scheme	"scheme-1"	-	-	Section color scheme
Background Media	select	"none"	none, image, video	-	Background media type
Video	video	-	-	Background Media is "video"	Background video file
Video Position	select	"cover"	cover, contain	Background Media is "video"	Video positioning
Background Image	image_picker	-	-	Background Media is "image"	Background image
Background Image Position	select	"cover"	cover, fit	Background Media is "image"	Image positioning

Border & Effects Settings

Setting	Type	Default	Options	Visibility	Description
Border	select	"none"	none, solid	-	Border style
Border Width	range	1	0-10px (step: 0.5)	Border is not "none"	Border width
Border Radius	range	0	0-100px (step: 1)	-	Border radius
Toggle Overlay	checkbox	false	-	-	Enable background overlay
Overlay Color	color	"#00000026"	-	Toggle Overlay is true	Overlay color with alpha
Overlay Style	select	"solid"	solid, gradient	Toggle Overlay is true	Overlay style type
Gradient Direction	select	"to top"	to top, to bottom	Toggle Overlay is true and Overlay Style is "gradient"	Gradient direction

Animation Settings

Setting	Type	Default	Options	Visibility	Description
Image Behavior	select	"none"	none, ambient, zoom-in, parallax	Background Media is "image"	Image animation behavior

Animation Options:

• none - No animation

• ambient - Ambient movement effect

• zoom-in - Zoom in on scroll

• parallax - Parallax scroll effect

Padding Settings

Setting	Type	Default	Description
Padding Block Start	range	36	Top padding (0-100px)
Padding Block End	range	36	Bottom padding (0-100px)
Padding Inline Start	range	0	Left padding (0-100px)
Padding Inline End	range	0	Right padding (0-100px)

Useful Blocks

This section supports most blocks. Below are some useful blocks commonly used in combination with this section that you should know about:

• Group Block

• Image

• Image With Content

• Multicolumn

• Collapsible Text​

Need More Help?

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

Join HaloThemes Community