Logo bar
A row of press or partner logos, as a moving marquee, a carousel or a static row.
munich-demo.myshopify.com
What it does
A section header and a row of logos at one height. Marquee runs them as a continuous moving line, Carousel shows them in a scrollable row with arrows, Row lays them out statically and wraps. Logos can be shown in grayscale so they read as one set.
When to use it
“As seen in”, “Trusted by”, partner and certification logos. Under the problem or promise section on the home page, or above the testimonials. Not for your own product photos; that is what the Collage and the Social gallery are for.
Blocks
- Logo: the image and its alt text. The alt text should name the publication or partner; that is what a screen reader hears.
Setting it up
- Add a Logo block per logo, six to ten of them.
- Set Height, 28 to 40 px works for most marks, and Gap.
- Choose Layout and, for the marquee, Marquee duration.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Full width |
| Layout | Select | Marquee runs the logos as a moving line. Carousel shows them in a scrollable row with arrows. Row lays them out and wraps.Options: Marquee, Carousel, Row · Default: Marquee |
| Header | ||
| Heading | Text | The heading of the section. Italicize a word to set it in the accent font.Default: As seen in |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Extra small |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Left |
| Link label | Text | Text of the link at the end of the section header, such as View all. Leave empty for no link. |
| Link | Link | Where the header link leads. |
| Logos | ||
| Height | Range | The height every logo is scaled to. Widths follow each file.20 to 80 px · Default: 32 |
| Gap | Select | The space between logos.Options: Small, Medium, Large · Default: Medium |
| Grayscale | Checkbox | Shows all logos in gray so they read as one set. Color returns on hover.Default: on |
| Marquee duration | Range | Seconds for one full loop of the marquee. Higher is slower.10 to 60 s · Default: 30 |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90 |
Logo block
| Setting | Type | What it does |
|---|---|---|
| Image | Image | The logo, as SVG or transparent PNG trimmed to the mark. |
| Alt text | Text | The name of the publication or partner, for people using a screen reader. |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Upload logos as SVG or as PNG with a transparent background, all trimmed to the mark. The bar scales them to one height; a logo with padding in the file looks smaller than the others.
- Grayscale makes any set of logos look like one set. Turn it off only if the logos are already monochrome.
- Use only logos you have permission to show. A press logo means the publication wrote about you, and the review may ask.