Sticky image cards
Overview
Sticky image cards creates a scrolling editorial story from image or video cards. As customers move through the section on desktop, each card can remain in view and transition into the next one.
Use it for collection stories, campaign chapters, brand values, or a short sequence of featured products.
Add the section
Add Sticky image cards 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 Sticky image cards, and select Save.
Set up the section heading
Add the section subheading, heading, and description first. Then choose the color scheme and heading alignment for desktop and mobile.
SECTION OPTIONS
| Section width | Use Full width or choose a contained section layout. |
|---|---|
| Color scheme | Controls the section background and text colors. |
| Sticky cards on desktop | Keeps cards pinned during the desktop scroll sequence. |
| Section corner radius | Enables independent corner controls for the four section corners. |
| Heading layout | Sets heading position and text alignment separately for desktop and mobile. |
| Section spacing | Sets top and bottom spacing independently for desktop and mobile. |
Create the cards
Add an Image with text item for every step in the story. You can add up to four cards, and their order in the Theme Editor is their storefront order.
- Select Add block > Image with text item.
- Choose Image or Video as the media type and assign the media.
- Add the card subheading, heading, description, and optional badge.
- Set Media placement and Content position, then align the content for desktop and mobile.
- Add a button label and link when the card should lead to another page.
CARD OPTIONS
| Media type | Switches the card between an image and a Shopify-hosted video. |
|---|---|
| Media scale | Adjusts the visual size of the media inside the card. |
| Media placement | Controls where the media sits relative to the card content. |
| Content position | Places the text area within the card layout. |
| Desktop and mobile alignment | Aligns card content separately for each layout. |
| Button | Adds a linked action and exposes button style and size controls. |
| Block spacing | Adds spacing around an individual card without changing the whole section. |
Accessibility behavior
Sticky behavior is intentionally disabled in keyboard-navigation mode so focus movement and page scrolling remain predictable.
Check the result
Scroll through the entire section on desktop, then test the stacked mobile layout. Also navigate the page with the Tab key and confirm every linked button can be reached.
Troubleshooting
COMMON ISSUES
| Sticky effect is not running | Confirm Sticky cards on desktop is enabled. The effect is intentionally off in keyboard-navigation mode. |
|---|---|
| Cards appear in the wrong order | Drag the card blocks into the required order in the Theme Editor. |
| Text is difficult to read | Choose a more suitable color scheme or change media and content placement. |