Creates flexible custom layouts using rows, columns, groups, media, text, products, forms, and other content blocks. Suitable for building sections that are not available in the theme’s predefined layouts.
Homepage
Landing page
Promotional campaign
Custom content layout
Newsletter or social section
Product showcase
Shopify Admin → Online Store → Themes → Customize → Add section → Custom section
Multi Row: Creates the main row structure.
Column: Divides a row into responsive columns.
Group: Organizes multiple blocks horizontally or vertically.
Content blocks: Heading, Text, Button, Image, Spacer, Countdown, Social, Newsletter, Video popup, Product blocks, and Product description.
Setting | Description |
|---|---|
Spacing between items | Controls gaps on desktop, tablet, and mobile. |
Make section full width | Expands the section across the browser width. |
Color scheme | Controls the section colors. |
Section padding | Adjusts spacing above and below the section. |
Custom CSS | Adds custom styles to this section only. |
Setting | Description |
|---|---|
Display mode | Selects Multi Row 10 or Multi Row 12. |
Rounded | Controls the row’s corner radius. |
Setting | Description |
|---|---|
Column width | Sets the column width on desktop, tablet, and mobile. |
Padding | Controls internal spacing by device. |
Content position | Positions content inside the column. |
Alignment | Aligns content horizontally. |
Background image | Adds a column background image. |
Background color | Sets the column background color. |
Rounded | Controls the column’s corner radius. |
Setting | Description |
|---|---|
Direction | Arranges blocks horizontally or vertically. |
Vertical on mobile | Stacks group content vertically on mobile. |
Alignment and position | Controls content placement inside the group. |
Gap | Adjusts spacing between grouped blocks. |
Width | Selects Fit, Fill, or Custom width. |
Mobile width | Controls width on mobile. |
Color scheme | Applies colors to the group. |
Rounded | Controls the group’s corner radius. |
Padding | Adjusts internal spacing. |
Block | Main use |
|---|---|
Heading / Text | Adds responsive titles and supporting content. |
Button | Adds a linked call-to-action. |
Image | Adds desktop and mobile images with optional hover effects. |
Spacer | Controls spacing between blocks. |
Countdown | Displays a promotional countdown timer. |
Social | Displays social-media icons configured in Theme settings. |
Newsletter | Adds an email subscription form. |
Video popup | Opens an uploaded or external video in a popup. |
Product carousel / grid | Displays selected products. |
Product description | Displays the description of a selected product. |
An uploaded video overrides the external video link.
Social links must be added under Theme settings → Social media.
Use separate mobile images when desktop media does not crop correctly.
Product descriptions are pulled automatically from the selected product.
Hover effects may resize or crop images.
Build the main row and column structure before adding content.
Keep column widths consistent and ensure each row totals a balanced layout.
Stack complex groups vertically on mobile.
Avoid using too many nested rows, columns, and groups.
Use consistent spacing, colors, and corner styles.
Compress images and videos to improve performance.
Issue | Solution |
|---|---|
Content layout is uneven | Review column widths and spacing on each device. |
Blocks look crowded on mobile | Stack groups vertically and reduce mobile padding. |
Social icons are missing | Add social links in Theme settings. |
External video is ignored | Remove the directly uploaded video. |
Background image is not visible | Check the column height, content, and image selection. |
Custom CSS affects the wrong content | Use a unique custom class or section-specific selector. |