Logo carousel
Show linked partner, press, retailer, or certification logos.
Logo carousel presents a row of brand marks with optional continuous movement. Use it for partners, stockists, press, certifications, or compatible services—not as a substitute for descriptive content.
Current desktop example: judge logo scale and spacing in context with the surrounding sections. Motion, mobile height, and reduced-motion states still need direct comparison.
Add Logo carousel
- Open Online Store > Themes > Customize.
- Use the page selector to open the template where the partner or brand marks should appear.
- Select Add section, then choose Logo carousel.
- Add the Logo blocks and link only the marks that need a destination.
The section supports up to 24 Logo blocks. Continuous movement is available only when more than one block has a logo image.
Heading
| Setting | Options and use |
|---|---|
| Eyebrow | Short label above the heading. Default: Selected partners. |
| Heading | Main section heading. Default: Featured brands. |
| Text | Supporting rich text. Default: A rotating selection of names we work with. |
| Heading alignment | Left, Center, or Right. Default: Center. |
| Content width | Small, Medium, or Large. Default: Medium. |
Use the heading to explain what the marks represent. Do not make visitors infer a partnership or certification from a logo alone.
Logos
| Setting | Options and use |
|---|---|
| Logo height on desktop | 12–140 px in 4 px steps. Default: 52 px. |
| Logo height on mobile | 12–96 px in 4 px steps. Default: 32 px. |
| Gap | Small, Medium, or Large. Default: Medium. Controls the space between marks. |
The two logo-height settings are independent. Review the visible weight of the marks rather than matching their source file dimensions.
Motion
| Setting | Options and use |
|---|---|
| Auto-scroll | Enables continuous movement when at least two Logo blocks contain images. Default: On. |
| Scroll speed | 10–100 px/s in 5 px/s steps. Default: 30 px/s. This setting appears when Auto-scroll is on. |
| Pause on hover | Pauses the moving row while a pointer rests over a logo item on hover-capable devices. Default: On. This setting appears when Auto-scroll is on. |
The section also provides a pause/play control while automatic movement is active. A visitor can pause the row, and focus or direct pointer interaction pauses movement while the item is being inspected. Reduced-motion preferences stop the automatic movement and hide the automatic-motion toggle.
Blocks
Add up to 24 Logo blocks and reorder them in the Theme Editor.
| Setting | What it controls |
|---|---|
| Logo | The image used for the mark. |
| Link | Optional destination for the mark. Leave it blank when the logo is informational only. |
| Accessible label | Describes the logo or its destination to screen readers. When blank, Strata uses the image alt text; if that is also blank, it falls back to a numbered logo label. |
Write an accessible label that names the organization and explains the destination when the mark is linked. Do not put private dashboard links or account-only URLs in a public logo block.
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 logo heights are separate. The row can be static or continuously moving, and the accepted browser fixture should verify the final mark crop, spacing, and pause control at both sizes. Do not assume a mark that looks balanced on desktop has the same visual weight at the mobile height.
Media recommendations
Use clean logo files with consistent visual weight and a transparent background when the artwork needs to sit on different surfaces. Add meaningful image alt text in Shopify Files, then use Accessible label when the link needs more context. Exact file dimensions are not prescribed here; verify the selected heights with the approved fixture.
Accessibility and motion
- Keep the explanatory Heading or Text when a row of marks would otherwise be ambiguous.
- Use Accessible label for linked marks and confirm keyboard focus is visible.
- Keep automatic movement off or use reduced-motion settings when the row is distracting.
- Check that every link has a clear destination independent of hover or scrolling.
- Verify pause/play, focus, pointer interaction, and reduced-motion behavior in an accepted browser run.
Common issues
- The row does not move: confirm that Auto-scroll is on and at least two Logo blocks contain images; reduced-motion preferences also stop movement.
- A setting is missing from the editor: Scroll speed and Pause on hover appear only when Auto-scroll is on.
- Marks look uneven: adjust the two logo-height settings and use source files with more consistent visual weight.
- A logo is announced incorrectly: add Accessible label or correct the image alt text.
- A mark has no action: add Link only when visitors should be taken somewhere.
Related guides
- Social carousel for linked community or campaign images.
- Footer for the footer’s own logo and navigation content.
- Animation for reduced motion and shared parallax behavior.