Press logos and an As seen in logo wall on Shopify

Every gallery app is sold on product photos, and then half the galleries people actually build are rows of logos. Publications that mentioned the brand. Shops that stock it. Certifications and payment badges. Partner marks on a B2B page. These are not photos and they do not want photo treatment: no lightbox, no zoom, no caption, no shadow. This guide sets up Snug Gallery as a logo wall, covering the three layouts that suit it, the settings to switch off, the file formats that keep the logos sharp, and the one plan feature that turns a logo strip into a link to the article.

Pick the layout by how many logos you have

Four to six logos is a strip under the hero, and the Row layout is built for exactly that: one justified row where every image shares the same height and the row fills the width. Logos come in wildly different proportions, a tall crest next to a wide wordmark, and sharing a height rather than a width is what makes a mixed set look deliberate. Row has no second line, so if the count grows past what fits at a comfortable size, change layout rather than shrinking everything.

Seven to about twenty logos is a wall, and Grid handles it. Grid crops every image to the same shape, which sounds wrong for logos until you realise the crop is of the tile, not the mark: give every logo file the same canvas and the same margin (more on that below) and the uniform tiles are what you want. Set Columns on desktop to 4, 5 or 6, tablet to 3 or 4, mobile to 2, and Image shape to Landscape (4:3) or Wide (16:9) depending on how wide your wordmarks run.

More than that, or logos you want to keep adding to without redesigning the section, is a Carousel: several per view, scrolling sideways with arrows. Carousel is also the right answer for a footer, where a tall wall would push the legal links off screen. It is the only one of the three that moves, so if you have an opinion about motion on the page, see the comparison in the carousel versus slider guide before choosing it; Slider itself, one full-width image at a time, is wrong for logos.

Prepare the logo files

The gallery accepts JPEG, PNG, GIF, WebP, HEIC and AVIF. It does not accept SVG, and most press kits ship logos as SVG or EPS, so the first job is an export. Export each logo as PNG with a transparent background at a generous size, 800 pixels wide is plenty for a tile that renders at 200, and use the same canvas for every file: say 800 by 500, logo centred, with the mark scaled so its longest side fills about 70 percent of the canvas. That margin is what makes a row of unrelated brands sit on one visual line. Transparent PNGs behave in the gallery exactly as described in the transparent product images guide, including under dark themes.

Decide on colour before you export. A wall of full-colour logos is loud and pulls the eye away from your own brand; most stores use a single grey or the theme's text colour. Do the recolour in the design tool at export time, not with CSS, because a CSS filter cannot fix a logo that was supplied on a white rectangle. If you want colour to appear on hover, keep the exported files in colour and let the hover effect do the greying, which is the next step.

Alt text matters more here than on a product photo, because a logo carries no readable text to a screen reader. Use the brand name plus the word logo, for example Vogue logo, and for a press strip consider the headline instead: Featured in Vogue, March 2026. The alt text is also what search engines read, which is the point of the whole section.

Set up the block

In Snug Gallery, create a gallery named for its purpose (Press logos, Stockists, Certifications) and choose Row, Grid or Carousel as decided above. Upload the prepared PNGs and order them manually; put the most recognisable name first and the second most recognisable last, since a row is read from both ends.
In the theme editor, add the Gallery block to the section where it belongs: below the hero on the home page for press, on the About page for stockists, in the footer for payment and certification badges. Point it at the gallery and leave the heading empty or set it to the usual three words: As seen in, Stocked by, Certified.
Set Image shape to Landscape (4:3) or Wide (16:9) for Grid and Carousel. Row ignores the shape because it sizes by height. Set Spacing between images to something larger than the default 12 px, around 24 to 32 px, so the logos do not read as one image.
Turn off everything that treats the tile as a photo: Border off, Shadow none, Corner radius 0, Caption style Hidden, Lightbox off, Pinterest button off, Tag filter bar hidden. A lightbox on a logo opens a huge grey wordmark over the page and is the single most common complaint about logo walls built with gallery apps.
Set Hover effect to either None or Grayscale to colour. Grayscale to colour shows the logos grey and brings each one up in its own colour as the pointer passes, which is the familiar press-strip behaviour and needs the files exported in colour. Zoom, Lift and Shine are photo effects and look odd on a flat mark.
If the logos are transparent and the section background is the theme's page colour, you may want a faint tile behind each one so the row has edges. Add it under Custom CSS as .snug__item { background: rgba(0,0,0,.04); padding: 16px; } and adjust the alpha for dark themes; the custom CSS guide explains how the rules stay scoped to this block only.
Preview on a phone. Two columns of logos at mobile width is usually the limit; if a Row strip wraps awkwardly on small screens, duplicate the block, set one to Row for desktop and one to Grid with two columns for mobile, and hide each at the other breakpoint with the theme's visibility settings.

Link each logo to the article or the stockist

A press logo that goes nowhere is a claim; a press logo that opens the article is proof. On the Standard plan and above, each image in the gallery can carry its own link and an open in new tab switch. Put the article URL on each press logo and the retailer's product page on each stockist logo, and set them to open in a new tab so the shopper comes back to you. The clickable images guide covers the link field in detail, including what happens when a link and the lightbox are both on, which is why the lightbox should be off here.

On the free plan the images are not linked, and that is fine for certification badges and payment marks, which should not link out anyway. If a press mention is the thing selling your product, the link is worth the plan.

Keeping the wall honest

A press strip is a trust signal, so it is worth stating what it means. A publication that ran a paid placement is advertising, not press, and in several countries presenting it as editorial coverage is a consumer law problem. A stockist that dropped you last season should come off the wall the day they do. Use the gallery's manual order to keep the current, strongest names first, and the gallery's own image list as the record of when each was added, so the quarterly check is a two minute scroll rather than an archaeology project.

Certification marks usually come with usage rules: minimum size, clear space, approved colours, and sometimes a required link to the certifier's register. Those rules are why the uniform canvas step above matters, and why a payment or certification row is often better in colour with Hover effect set to None, exactly as the certifier supplied it.

Frequently asked questions

Can I upload SVG logos to the gallery?

No. The gallery accepts JPEG, PNG, GIF, WebP, HEIC and AVIF. Export each SVG as a PNG with a transparent background on a shared canvas, around 800 pixels wide, and upload those. At the size a logo tile renders, a PNG at that resolution is indistinguishable from the vector.

Which layout should I use for an As seen in strip?

Row for up to about six logos, because every image shares one height and the row fills the width. Grid with four to six desktop columns for a wall of seven to twenty. Carousel when the list is longer or lives in the footer. Slider shows one image at a time and is wrong for logos.

How do I make the logos grey until someone hovers over them?

Export the files in their real colours and set Hover effect to Grayscale to colour in the block settings. The gallery shows each logo desaturated and restores its colour as the pointer passes. If you want them permanently grey, recolour the files at export instead of relying on CSS.

Can each logo link to the press article?

Yes on the Standard plan and above. Each image has a link field and an open in new tab switch, so a press logo can open the article and a stockist logo can open the retailer. Turn the lightbox off so a tap goes to the link rather than opening the image.