Grid
Overview
Grid combines different content types inside one responsive column layout. Use it when a predefined Radian section cannot create the required mix of products, collections, text, and media.
Choose the right section
Use Grid when you need columns, gaps, mobile columns, or mobile swipe. Use Custom section when content only needs a flexible vertical composition.
Add the section
Add Grid to the template where you want customers to see it.
- From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
- Use the page selector at the top of the Theme Editor to open the required template.
- In the template panel, select Add section, choose Grid, and select Save.
Build the grid
- Set the section width, color scheme, desktop height, and mobile height.
- Choose the number of mobile columns and set the desktop and mobile gaps.
- Select Add block and add the required content blocks.
- Drag blocks into the intended desktop order.
- Enable Customize for mobile when the mobile layout needs a different order.
GRID OPTIONS
| Columns mobile | Sets how many columns are visible in the mobile grid. |
|---|---|
| Customize for mobile | Enables a mobile-specific block arrangement. |
| Swap block position | Reverses the configured mobile block order without changing desktop. |
| Desktop and mobile height | Uses Adapt, viewport percentage, or a fixed height for each layout. |
| Enable mobile swipe | Turns the mobile grid into a horizontally scrollable rail. |
| Gap | Sets the distance between grid items separately for desktop and mobile. |
| Sticky overlap | Pins overlapping grid content and optionally applies a scroll animation. |
Choose block types
AVAILABLE BLOCKS
| Collection | Creates a collection-focused grid item. |
|---|---|
| Product | Creates a product-focused grid item. |
| Text | Adds headings, body text, links, and buttons. |
| Media | Adds an image or video area with optional nested content. |
| Group | Keeps several child blocks together as one layout item. |
| Countdown | Adds a countdown block for a scheduled campaign or launch. |
Select each block after adding it to configure its source, content, alignment, media, and spacing. Group related content before adjusting the grid so it moves as one item.
Recommended setup order
- Add the minimum blocks needed for the composition.
- Finish the desktop block order, height, and gaps.
- Switch to mobile preview and choose the mobile column count.
- Enable mobile customization or swipe only when the default stacked layout is not suitable.
- Test every product, collection, button, and Custom Liquid output before saving.
Accessibility behavior
Sticky overlap is disabled in keyboard-navigation mode so the page does not trap or delay keyboard scrolling.
Troubleshooting
COMMON ISSUES
| Mobile page scrolls sideways | Reduce the mobile column count or item width and verify the rail is contained inside the section. |
|---|---|
| Blocks are in the wrong mobile order | Enable Customize for mobile, then use Swap block position when required. |
| Grid is too tall | Use Adapt to content or reduce the fixed or viewport-based height. |
| Sticky animation does not run with the keyboard | This is intentional accessibility behavior. |