Social grid
Overview
Social grid builds a visual social-style gallery, including a mobile mosaic that can rotate additional media with a soft fade transition.
Add the section
- 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 Social grid, and select Save.
Section settings
LAYOUT
| Full width | Turns full width on or off. |
|---|---|
| Section layout | Choose from Page, Content, Narrow, Custom. |
COLOR
| Color scheme | Selects one of the color schemes configured in Theme settings. |
|---|
BACKGROUND
| Use background | Turns use background on or off. |
|---|---|
| On scroll | Choose from None, Sticky, Parallax, Zoom in, Zoom out. |
| Parallax direction | Choose from Vertical, Horizontal. |
| Parallax speed | Adjusts parallax speed within the available range. |
| Zoom | Adjusts zoom within the available range. |
| On scroll mobile | Choose from Same as desktop, None, Sticky, Parallax, Zoom in, Zoom out. |
| Parallax direction mobile | Choose from Vertical, Horizontal. |
| Parallax speed mobile | Adjusts parallax speed mobile within the available range. |
| Zoom mobile | Adjusts zoom mobile within the available range. |
| Background image | Selects the background image used by this section. |
| Height | Choose from Percent of viewport, Fixed. |
| Percent height | Adjusts percent height within the available range. |
| Fixed height | Adjusts fixed height within the available range. |
| Mobile height | Choose from Percent of viewport, Fixed. |
| Mobile percent height | Adjusts mobile percent height within the available range. |
| Mobile fixed height | Adjusts mobile fixed height within the available range. |
| Media overlay opacity | Adjusts media overlay opacity within the available range. |
| Overlay color | Controls overlay color. |
| Mobile media overlay opacity | Adjusts mobile media overlay opacity within the available range. |
| Overlay color | Controls overlay color. |
GRID
| Desktop max columns | Choose from 2, 3, 4, 5. |
|---|---|
| Mobile max columns | Choose from 1, 2. |
| Mobile style | Choose the standard column layout or the mobile mosaic with one large tile and two smaller tiles. |
| Grid gap (desktop) | Adjusts grid gap (desktop) within the available range. |
| Grid gap (mobile) | Adjusts grid gap (mobile) within the available range. |
| Corner radius | Adjusts corner radius within the available range. |
| Mosaic corner radius | Adjusts mosaic corner radius within the available range. |
| On mobile show | Value of '0' disables the setting. |
| 'Show more' button label | Sets the 'show more' button label shown in the section. |
| Overlap | Choose from Disable, Enable. |
| Media ratio | Choose from Square, Landscape (4:3), Landscape (16:9), Portrait (3:4), Portrait (9:16). |
HEADING
| Heading | Sets the heading shown in the section. |
|---|---|
| Heading style | Choose from Display, Page title, Section heading, Secondary heading, Subheading, Body, Caption. |
| Make font bolder | Turns make font bolder on or off. |
HEADING LAYOUT
| Heading alignment desktop | Controls heading alignment desktop. |
|---|---|
| Heading position desktop | Choose from Left, Center, Right. |
| Heading alignment mobile | Controls heading alignment mobile. |
| Heading position mobile | Choose from Left, Center, Right. |
BUTTON
| Button label | Sets the button label shown in the section. |
|---|---|
| Button link | Sets the destination for button link. |
| Button style | Choose from Primary, Secondary, Link. |
SECTION SPACING
| Desktop and mobile spacing | Sets top and bottom spacing independently for desktop and mobile. |
|---|
Add and arrange blocks
Select Add block to include the content required by the section. Drag blocks in the Theme Editor to change their storefront order.
AVAILABLE BLOCKS
| Image | Adds and configures image content in this section. |
|---|---|
| Loop video | Adds and configures loop video content in this section. |
Recommended setup
- Choose the section width, layout, and color scheme before fine-tuning individual content blocks.
- Configure desktop positioning first, then switch the Theme Editor preview to mobile and adjust the mobile-specific controls.
- Check links, product or collection resources, and interactive controls before publishing the theme.
Conditional settings
Settings that depend on another option appear only when that parent option is enabled. If a control is missing, check the related layout, style, or enable toggle first.