Logo cloud
A static grid or row of press, partner or stockist logos with grayscale-to-color hover, separator lines or cards, and logo height per device.
- Category
- Social proof and trust
- Use on
- Home, About, Landing pages, Any page
- Reads
- Content only
- Size
- 19 KB, no JavaScript
- License
- MIT, free for client work
In short
Logo cloud is a free Shopify section that shows press, partner or stockist logos in an even grid or a wrapping row, each with an optional link. Logos can sit in grayscale at reduced opacity and turn to full color on hover, with plain, separator-line or card styles, and it works in Online Store 2.0 themes without an app or JavaScript.
When to use it
- "As seen in" press logos under the home page hero
- Stockists or retail partners on an About or wholesale page
- Certification or material partner marks on a landing page
In the theme editor
- Heading, heading tag and size, text
- Up to 24 logos: image, optional name, link, open in a new tab
- Style: plain, separator lines or cards; card corner radius
- Logo height on desktop and on mobile, opacity, grayscale, full color on hover, white-background blend
- Grid with 2–8 columns on desktop and 2–4 on mobile, or a wrapping row; spacing; alignment per device
- Background color or gradient, text, line and card colors
- Top and bottom padding per device, show on desktop/mobile only, anchor ID
Files
sections/lib-logo-cloud.liquidView the code
snippets/lib-image.liquidView the code
Written in plain Liquid, CSS and, where needed, a small script. No app, no dependencies.
How to add it to your theme
- Copy the section file into your theme’s sections folder, and any snippet it lists into snippets.
- In the theme editor, choose Add section and pick the one that starts with “Lib ·”.
- Replace the sample text with your store’s own, and set the colors to match your brand.
Questions
- How is this different from the Marquee section?
- Logo cloud is static: every logo is visible at once in a grid or a wrapping row, with nothing moving. Marquee scrolls a strip of logos or text in a loop. Use Logo cloud when the logos should be read at a glance.
- Where does the alt text come from?
- From each image's alt text in Shopify Files. If an image has none, the block's optional Name is used as the accessible name of the logo or its link.
- How does the grayscale effect work?
- It is a CSS filter with an adjustable opacity. With "Full color and opacity on hover" on, a logo returns to full color when it is hovered or, for linked logos, focused with the keyboard. There is no JavaScript, and the transition is switched off for visitors who prefer reduced motion.
- How many logos can I add, and how does it look on mobile?
- Up to 24 logo blocks. The grid shows 2 to 8 columns on desktop, up to 4 on tablets and 2, 3 or 4 on phones; the row layout lets logos keep their own width and wrap. Logo height is set separately for desktop and mobile.
- My logos are JPGs on a white box. Can I hide the box?
- Turn on "Blend white logo backgrounds into the section". It uses a multiply blend, which hides white backgrounds on light section colors; on dark backgrounds use SVG or transparent PNG logos instead.
Before you publish
- The text in the demos is sample content. Replace it with facts about your own store before you publish.
- Animations are switched off for visitors who ask for reduced motion.
- Every file is checked with Shopify Theme Check before it is published here.
Need it adapted to your theme, or a section that isn’t here? See Shopify theme development.
More sections
Social proof and trust
Stats counter
Up to 6 figures with label, description and icon that count up when scrolled into view. Row with dividers, cards, or big numbers beside the heading.
Social proof and trust
Testimonials
Customer quotes with star ratings, names and initials avatars in a grid, a masonry wall or a swipeable row with arrow buttons.
Social proof and trust
Trust badges
Row of trust points (delivery, returns, secure checkout) with line icons, short text and links, plus your store's accepted payment icons.
