Custom section
Overview
Custom section is a flexible canvas for arranging text, media, buttons, groups, multimedia, countdowns, and small Custom Liquid enhancements. It is useful when you need a composition that is not available as a dedicated section.
Custom section or Grid?
Choose Custom section for a free-form stack of reusable blocks. Choose Grid when the design requires explicit columns, grid gaps, mobile columns, or horizontal swipe.
Add the section
Add Custom section 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 Custom section, and select Save.
Set up the section
SECTION OPTIONS
| Section width | Use Full width or select Page, Content, Narrow, or Custom width. |
|---|---|
| Color scheme | Controls the default background and foreground colors. |
| Background | Adds a background image behind the section content. |
| Section corner radius | Enables independent controls for all four corners. |
| Sticky overlap | Pins the section during scroll and optionally applies an overlap animation. |
| Section spacing | Sets top and bottom spacing separately for desktop and mobile. |
Add content blocks
Add blocks in the order customers should read them. Use Group to keep related elements together, such as a heading, paragraph, and buttons.
AVAILABLE BLOCKS
| Text | Adds editable text content and can contain supporting text or button blocks. |
|---|---|
| Group | Combines child blocks into one editable content group. |
| Media | Adds image or video media with optional nested content. |
| Multimedia | Creates a richer media composition from multimedia items. |
| Buttons | Adds and aligns one or more button blocks. |
| Countdown | Adds a countdown for a promotion, event, or product launch. |
| Custom Liquid | Adds merchant-authored Liquid or HTML when native blocks are not sufficient. |
Recommended setup order
- Choose the section width, color scheme, and optional background image.
- Add a Group when several blocks need shared alignment or spacing.
- Add Text, Media, Multimedia, Button, or Countdown blocks inside the required order.
- Configure desktop and mobile alignment and spacing on each content-bearing block.
- Use Custom Liquid only after confirming that native blocks cannot create the required result.
Custom code
Custom Liquid can affect layout and storefront behavior. Test the section on a duplicate theme before adding code from an external source.
Accessibility behavior
Sticky overlap is disabled in keyboard-navigation mode to keep page scrolling and focus movement predictable.
Troubleshooting
COMMON ISSUES
| Content is difficult to reorder | Place related blocks inside a Group, then move the Group as one item. |
|---|---|
| Text has poor contrast | Choose a compatible color scheme or remove the background image. |
| Custom Liquid breaks the layout | Remove the custom code and rebuild the content with native blocks before adding code back in small parts. |
| Sticky animation does not run with the keyboard | This is intentional accessibility behavior. |