Stories
Overview
Stories displays tap-friendly visual stories for campaigns, collections, or editorial content.
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 Stories, 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. |
|---|
STORIES LAYOUT
| Style | Choose from Avatars, Card rail. |
|---|---|
| Heading | Sets the heading shown in the section. |
| Card size | Choose from Small, Medium, Large. |
| Card corner radius | Adjusts card corner radius within the available range. |
| Play video previews | Plays Shopify-hosted videos muted while their cards are visible. Customers can pause each preview. |
| Show story titles | Turns show story titles on or off. |
| Show product or collection link | Shows a small button at the bottom of the story. It links to the selected product, or to the selected collection when no product is selected. |
| Product corner radius | Controls the corner radius of the product or collection background shown inside the lightbox. |
| Enable panel hover effect | Turns enable panel hover effect on or off. |
| Alignment desktop | Choose from Left, Center, Right. |
| Avatar size desktop | Adjusts avatar size desktop within the available range. |
| Avatar style | Choose from Gradient ring, Clean ring, Soft disc, Square card, Minimal dot. |
| Gap | Adjusts gap within the available range. |
| Viewer corner radius | Adjusts viewer corner radius within the available range. |
MOBILE LAYOUT
| Alignment mobile | Choose from Left, Center, Right. |
|---|---|
| Avatar size mobile | Adjusts avatar size mobile within the available range. |
| Gap (mobile) | Adjusts gap (mobile) within the available range. |
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. |
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
| Story | Adds and configures story 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.