The Custom section provides a flexible grid-based layout that allows you to build custom content using Rows and Columns. Multiple columns can be placed horizontally within the same row, with each column having its own width, image, alignment, spacing, and content.
This makes the section suitable for creating custom image grids, promotional banners, category layouts, or other multi-column designs.
Use Section width to control the overall width of the section.
Container: Display the content within the theme's standard container width.
Boxed: Display the content within a constrained boxed layout.
Full: Extend the section across the full available width.
Use the appearance settings to customize the section background.
Color scheme: Select the color scheme used for the section.
Custom background type: Choose how the section background is displayed:
Inherit: Use the background from the selected color scheme.
Color: Use a custom background color.
Media: Use an image or video as the section background.
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Set the space above the section on desktop.
Bottom padding: Set the space below the section on desktop.
Mobile top padding: Set the space above the section on mobile.
Mobile bottom padding: Set the space below the section on mobile.
Click Add block to add a Row. A Row acts as a container for multiple Columns and determines how they are arranged within the section.
For example, you can add Row 10 Columns to display five promotional images horizontally.
Auto: Automatically use the available row width.
Custom: Set a custom width for the row.
Use the spacing settings to control the distance between Columns. Spacing can be configured independently for different screen sizes.
Desktop
Horizontal spacing: Set the horizontal space between Columns.
Vertical spacing: Set the vertical space between Columns when they appear on multiple lines.
Tablet
Horizontal spacing: Set the horizontal space between Columns on tablet.
Vertical spacing: Set the vertical space between Columns on tablet.
Mobile
Horizontal spacing: Set the horizontal space between Columns on mobile.
Vertical spacing: Set the vertical space between Columns on mobile.
10-column grid: Divides the row into 10 equal units. Each column width is defined by how many of these units it occupies. For example, 2/10 takes up 20% of the row width.
12-column grid: Divides the row into 12 equal units, providing more flexibility for common layouts. For example, 3/12 creates a 25% width, 4/12 creates approximately 33%, and 6/12 creates a 50% width.
Inside a Row, click Add block to add individual Column blocks. Multiple Columns can be added to the same Row and displayed horizontally.
Each Column can have its own width and content, allowing you to create layouts with equal or different column sizes.
Use the general Column settings to customize its appearance.
Inherit color scheme: Use the color scheme inherited from the parent section.
Custom content width: Enable a custom width for the content placed inside the Column.
Corner radius: Adjust the corner radius of the Column on desktop.
Corner radius (mobile): Adjust the corner radius on mobile.
Use the Image overlay settings to display an image as the visual background of the Column.
Image: Select the image displayed in the Column.
Mobile image: Select a separate image for mobile devices. If no mobile image is selected, the desktop image is used.
Image overlay opacity: Adjust the opacity of the overlay applied over the image. Increasing the overlay can help content placed over the image remain readable.
Use the Desktop settings to control the Column size and content position.
Width: Set how much of the Row the Column occupies. For example, 2/10 (20%) means the Column takes up 20% of the Row.
Content alignment: Set where the content is positioned inside the Column, such as Bottom center.
Top padding: Adjust the space above the Column content.
Bottom padding: Adjust the space below the Column content.
Left padding: Adjust the space on the left side of the content.
Right padding: Adjust the space on the right side of the content.
When multiple Columns are added to the same Row, their widths determine how they are arranged horizontally. For example, five Columns set to 2/10 (20%) each can fill one complete row.
Click Add block inside a Column to add content over or within the Column.
Available content blocks include:
Breadcrumb: Add breadcrumb navigation.
Countdown timer: box: Add a countdown timer with a boxed layout.
Countdown timer: inline: Add a countdown timer with an inline layout.
Custom liquid: Add custom Liquid content.
Group button: Add a group that can contain one or more buttons.
Heading: Add a heading.
Icon: Add an icon.
Image: Add an additional image as content.
Label: Add a short label or badge, such as Discover.
Spacer: Add additional space between content blocks.
Sub text: Add supporting text.
Text: Add regular text content.
For example, you can use an image as the Image overlay, then add a Label at the top and a Button such as Shop now at the bottom of the Column.
Each Column can be configured independently, so you can use different images, content, widths, and alignments while keeping all Columns within the same horizontal Row.