Social carousel
Present linked community, campaign, or social-style image cards.
Social carousel displays up to 24 linked visual cards in a moving or manually controlled row. Use it to bring community images, campaign moments, or selected social content into the storefront.
Current desktop example: review image crops, overlays, card copy, gaps, and navigation controls across several cards rather than judging the first card alone.
Add Social carousel
- Open Online Store > Themes > Customize.
- Use the page selector to open the template where community or campaign images should appear.
- Select Add section, then choose Social carousel.
- Add the Social card blocks and set a link only when the card should open a destination.
The section supports up to 24 Social card blocks and is not available in header, footer, or overlay section groups.
Heading
| Setting | What it controls |
|---|---|
| Eyebrow | Short label above the heading. Default: Follow along. |
| Heading | Main section heading. Default: From the community. |
| Text | Supporting rich text. Default: Show social posts, customer photos, or moments from your brand. |
| Link label | Label for the section-level link. Default: View social profile. |
| Link | Destination for the section-level link. |
The section-level link is separate from each card’s Card link. Use it for a profile, gallery, or collection destination that represents the entire row.
Layout
| Setting | Options and use |
|---|---|
| Heading alignment | Left, Center, or Right. Default: Left. |
| Content width | Small, Medium, or Large. Default: Medium. |
| Full width | Lets the carousel track use the full available width when on. Default: On. |
Cards
| Setting | Options and use |
|---|---|
| Image ratio | Natural, Landscape, Square, or Portrait. Default: Natural. |
| Card text color | Color for copy over the card image. Default: #FFFFFF. |
| Card height on desktop | 240–640 px in 20 px steps. Default: 420 px. |
| Card height on mobile | 160–440 px in 20 px steps. Default: 280 px. |
| Gap | None, Small, Medium, or Large. Default: Medium. |
| Overlay opacity | 0–80% in 5% steps. Default: 30%. The gradient sits behind card copy. |
Natural preserves the source image ratio; the other choices create a consistent presentation across cards. Review every image because a ratio that suits one card can crop another subject.
Motion and controls
| Setting | Options and use |
|---|---|
| Auto-scroll | Enables continuous movement. Default: On. |
| Scroll speed | 10–100 px/s in 5 px/s steps. Default: 35 px/s. Visible when Auto-scroll is on. |
| Pause on hover | Pauses automatic movement while a pointer rests over a card on hover-capable devices. Default: On. Visible when Auto-scroll is on. |
| Enable parallax for this section | Default: On. Requires the global Enable parallax effects setting; reduced-motion preferences override both. |
| Show arrow controls | Adds previous and next card controls. Default: On. |
The current implementation also provides a pause/play control when automatic scrolling is active. Movement pauses during focus and direct pointer interaction, when the section is not visible, or when reduced motion is requested. Verify the accepted browser state before treating each pause condition as final support behavior.
Blocks
Add up to 24 Social card blocks and reorder them in the Theme Editor.
Content
| Setting | What it controls |
|---|---|
| Image | Card image. Its alt text is used when no other image description is supplied. |
| Title | Card heading. Default: Add a title. |
| Short description | Supporting card copy. Default: Add context for this image or post. |
| Card link | Optional destination for the card. |
| Card link label | Screen-reader label for the linked card. When blank, Strata uses the title and then a generic card label. |
Keep the card title and link label useful without depending on the image itself. If the card has no link, it remains informational.
Spacing
| Setting | Options and use |
|---|---|
| Section spacing | None, Small, Medium, or Large. Default: Medium. |
| Top spacing | Adds the section’s top spacing. Default: On. |
| Bottom spacing | Adds the section’s bottom spacing. Default: On. |
Desktop and mobile behavior
Desktop and mobile card heights are independent. The selected image ratio, source focal point, and card height determine the visible crop at each size. Check the final card, the arrow controls, and any section-level link at both sizes; the current evidence set contains desktop only.
Media recommendations
Use approved, public-facing images with a clear focal subject and meaningful alt text. Keep descriptions short enough for the selected card height. Exact image dimensions are not prescribed here; validate the crop and overlay with the accepted fixture.
Accessibility and motion
- Use Card link label when a title does not explain the destination.
- Keep arrow and pause controls keyboard reachable and visibly focused.
- Do not rely on auto-scroll to reveal a card’s only important message.
- Check Card text color and Overlay opacity against every card image.
- Verify reduced-motion, touch, keyboard, hover-pause, and arrow behavior in an accepted browser run.
Common issues
- The row does not move: confirm Auto-scroll is on, the section is visible, and reduced-motion is not suppressing movement.
- Speed or hover settings are missing: these settings appear only when Auto-scroll is on.
- An arrow is missing: confirm Show arrow controls is on and the section has card blocks.
- A card’s copy disappears into the image: adjust Overlay opacity and Card text color, then check all cards.
- The destination is unclear: add Card link label and verify the URL behind Card link.
Related guides
- Logo carousel for partner or certification marks.
- Flexible media grid for mixed editorial blocks.
- Animation for reduced motion and global parallax.