About the Logo Showcase Widget
Zyff's logo showcase widget builds a wall of client, partner or press logos for any website, free. Choose a scrolling strip that loops continuously, a static grid, or a paged carousel; set every logo to the same height so mismatched shapes read as tidy; and desaturate them so a set collected from a dozen different brand kits looks deliberate rather than like a ransom note. Zyff does not host the images — you paste URLs from wherever they already live — and the output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a logo carousel to your website
Add your logos
Paste an image URL for each company and give it a name. The name is used as the image's alt text, so a screen reader announces the company rather than skipping past it.
Pick an arrangement
A scrolling strip fits any number of logos in one row, a grid works when the logos are the point rather than a backdrop, and a carousel pages through a long list in a small space.
Match the heights
Set one height for every logo and, if the set is visually mismatched, desaturate them. These two settings do most of the work of making a logo wall look designed.
Copy the embed code
Paste the container div and script tag where the logos should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Logo Showcase Widget does
A strip that loops without a seam
The scrolling arrangement renders the row twice and travels exactly half its width, so the loop point is invisible — no gap, no jump, and nothing to tune when you add a logo.
One height, many shapes
Logos arrive as wide wordmarks and square marks alike. Setting a single rendered height and letting the widths vary is what makes a mixed set read as one row rather than a jumble.
Desaturation with colour on hover
Fade every logo toward grey by any amount, and optionally restore full colour when a visitor hovers. It is the standard fix for a client wall assembled from a dozen brand kits.
Links, and proper alt text
Each logo can link to that company, and the name you type becomes the image's alt text — so the widget is useful to a screen reader rather than a row of unlabelled images.
Never a broken image
A logo with no image URL yet renders its company name instead, so a half-finished wall on a live page looks intentional rather than broken.
Nothing to slow your page
The whole widget runs in the visitor's browser from the settings in your snippet, makes no request to Zyff when your page loads, and stops scrolling entirely for visitors who ask for reduced motion.
At a glance
| Logos | Up to 40, each with a name, image URL and optional link |
|---|---|
| Arrangements | 3 templates: scrolling strip, grid, carousel |
| Columns | 1 to 6 in the grid and carousel, dropping to 2 below 900px and 1 below 560px |
| Logo height | 20 to 120px, applied to every logo |
| Desaturation | 0 to 100%, with optional full colour on hover |
| Image hosting | None — the widget loads your images from their own URLs |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a logo carousel to my website?
Paste an image URL for each logo in Zyff's builder, pick the scrolling strip, grid or carousel, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Does Zyff host my logo images?
No. You paste a URL for each logo and the widget loads it from there, which means replacing the file at that URL updates it everywhere the widget is embedded without you touching the snippet. It also means Zyff never stores your clients' brand assets.
Why do my logos look mismatched?
Almost always because they were collected from different brand kits at different sizes, with different amounts of padding baked in. Two settings fix most of it: give every logo the same rendered height, and desaturate them so the colours stop competing. Transparent PNG or SVG helps more than either.
What image format works best for logos?
SVG, because it stays sharp at any size and is usually the smallest file. Transparent PNG is the next best. Avoid JPEG for logos — it cannot do transparency and its compression blurs the sharp edges a wordmark is made of.
Does the scrolling strip loop smoothly?
Yes. The row is rendered twice and animated by exactly half its own width, so at the moment it resets the second copy sits precisely where the first began. There is no visible seam and nothing to re-tune when you add or remove a logo.
Will the animation bother visitors who dislike motion?
No. The strip stops entirely for anyone whose system asks for reduced motion, and the carousel stops advancing on its own for them too. You can also pause the strip on hover so a visitor can read a logo they want to look at.
Is the logo carousel accessible?
The name you enter for each logo becomes the image's alt text, so a screen reader announces the company. The duplicated row in the scrolling strip is hidden from assistive technology so no logo is read twice.
Where do I paste the logo showcase embed code?
Wherever the logos should appear — usually a strip under the hero on a home page, or in a footer. Put the container div in that spot and keep the script tag with it.
Is the logo showcase widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Logos by Zyff" link, which is how the tool stays free. The scrolling strip and the grid are both free. An optional account saves a widget so you can edit it later, and a paid plan adds the carousel, the desaturation control, full colour control and removes the attribution link.