A logo list section for Shopify that shows a heading above a wrapping row of logos. Use it for the brands you stock, the shops that carry your products, press mentions or certifications. Copy section.liquid into your theme's sections folder and add it from the theme editor as "WDS Logo list".
How it works
Each logo is a block with an image, alt text and an optional link. Logos share one height and wrap onto new rows as the screen narrows, staying centered, so any number from 1 to 16 looks balanced. Very wide logos are limited to 176 px and scaled down to fit rather than cropped.
With Show logos in grayscale on, every logo is shown gray and slightly faded. Hovering over a logo, or focusing a logo link, returns it to full color.
Until you upload a logo, the block shows a text-free placeholder shape, so the section looks complete as soon as you add it and never shows invented brand names.
Customization
All in the theme editor:
- Heading: the line above the logos. Clear it to show logos only.
- Show logos in grayscale: turn it off to show the logos in their own colors at all times.
- Logo height: 24 to 72 px.
- Logo image on each block: files with a transparent background look best.
- Alt text on each block: the brand name for screen readers.
- Link on each block: makes that logo clickable.
- Background, Text and Accent colors: the accent is used for the focus outline and for placeholder logos when grayscale is off.
- Side padding, Top padding and Bottom padding.
Use cases
- Stores listing brands: show the brands you stock in a wrapping row under a heading
- Press mentions: display the publications that featured your products, with optional links
- Certifications: show certification logos in grayscale to keep the page calm
- New stores: use text-free placeholders until you add logos
Accessibility
The logos are a real list. Each image uses the block's Alt text, then the image's alt text from Shopify, then a generic "Brand logo". Linked logos can be reached with the keyboard, show a clear focus outline and return to full color on focus. Placeholder shapes are hidden from screen readers. The color transition is turned off for people who prefer reduced motion.
Usage notes
This section requires an Online Store 2.0 theme. It has no JavaScript and does not depend on theme CSS.
The preview uses sample data: the store and all eight brands are invented, and their logos are drawn as inline SVG so that the grayscale and hover effects are visible. section.liquid contains no logos or photos, so upload your own.
This is a static, wrapping row, not a scrolling carousel. On touch devices there is no hover, so grayscale logos stay gray unless they are focused. Placeholder shapes also appear on the live storefront for any block without an image, and six appear if you remove every block, so upload all your logos or delete the unused blocks before publishing. The default heading says "Trusted by the brands you know": keep wording like that only if it is true, and show only logos you have permission to use.
