Logo list

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the button block
3. Company XYZ documentation on the logo item block
4. Company XYZ documentation on the rich text block
5. Company XYZ documentation on headers settings
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on separators settings
9. Company XYZ documentation on visibility settings
10. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Display a clean grid of logos, badges, or linked image tiles. This section is a strong fit for partner brands, trust signals, stockists, certifications, or simple image-based navigation when text-heavy layouts feel too busy. For a broader overview of how this fits into a theme, see Shopify documentation on sections and blocks

Core settings

The main layout controls determine how dense or spacious the logo grid feels. Use horizontal alignment to position the grid within the content area, then adjust desktop, tablet, and mobile column counts so logos stay recognizable on every screen size.

Tablet can inherit the desktop column count when you do not need a separate in-between layout. That keeps setup simpler and usually works well when most logos share similar proportions.

If logos start to feel too small, reduce the column count before increasing individual logo widths. A clearer grid usually performs better than a denser one.

Section-specific setting groups

Color settings

These overrides style the heading area of the section, including the icon, heading, and subheading. Use them when this logo grid needs its own visual treatment without changing the rest of the page.

If the logos themselves are colorful, keep heading colors simple so the section does not feel crowded. When combined with a custom background, check contrast carefully.

Supported block types

1. Button
2. Logo item
3. Rich text

Button

The Button block adds a separate call to action within the section. This works well when the logos support a larger destination, such as a full partners page, media page, or wholesale information page.

Learn more about the Button block.

1. Use a Button block when the section needs one clear next step beyond individual logo links.
2. Keep the button purpose distinct if the logos themselves are also clickable.
3. Full-width mobile display can make the action easier to tap near the end of a page.

Logo item

The Logo item block is the main content block for this section. Each one can include an image, optional caption or text, and an optional link, so it can function as either a simple logo wall or a visual navigation item.

Learn more about the Logo item block.

1. Use similarly sized source images for a neater overall grid.
2. Adjust max image width per block to correct logos that look visually too large or too small.
3. Add captions only when they add useful context, such as partner type or destination.

Tip

When one logo feels oversized, adjust that single block instead of changing the whole grid.

Rich text

The Rich text block adds short supporting copy inside the section. Use it for brief context, such as why these logos matter or what visitors can expect if the logos are used as navigation.

Learn more about the Rich text block.

1. Keep copy short so the section still reads primarily as a logo grid.
2. Use separate desktop and mobile alignment if the text needs different positioning on smaller screens.
3. Background color on the block can help supporting text stand out, but use it sparingly.

Standard section settings

Header settings

Header settings let you add a caption, heading, subheading, icon, and optional section-level button above the logo grid. This is useful when the logos need context, such as featured brands, certifications, or media mentions.

A short heading often improves clarity and scanability. If you also add Button blocks, make sure each action serves a different purpose.

Padding settings

Padding settings control the space above and below the section. Increase padding when the logo list should feel more prominent, or reduce it when it sits between several compact content sections.

Mobile spacing often needs separate adjustment because stacked rows can make the section feel taller than expected.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the section. This can create a stronger branded moment, but busy backgrounds can compete with the logos.

Caution

Detailed backgrounds and transparent logo files can reduce clarity. Use overlays or simpler background treatments when logo recognition is the priority.

Separator settings

Separator settings add a line above or below the section. They are most useful when the logo list needs a cleaner visual break from surrounding content.

For most logo sections, subtle separators work better than decorative ones.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is helpful when you want a simpler mobile presentation or a different section elsewhere for smaller screens.

Block-level visibility controls can also help you trim supporting content without hiding the entire section.

Width settings

Width settings control the content width and the outer section width. Wider layouts can support more balanced multi-column logo grids, while narrower layouts can make a smaller set of logos feel more intentional.

The editor may not fully reflect width changes, so check the live page preview when fine-tuning layout.

Usage notes

1. Prioritize recognition. Choose column counts that keep logos easy to identify at a glance.
2. Normalize visual size. Use per-logo width adjustments to balance marks with very different proportions.
3. Link with intention. If logos act as navigation, make sure each destination is clear and useful.
4. Add context when needed. Use the header or a short Rich text block to explain why these logos are grouped together.
5. Preview across devices. Check desktop, tablet, and mobile layouts before publishing, especially when mixing logos with text or buttons.
6. Review mobile separately. Desktop and mobile controls can change alignment, visibility, and image behavior, so confirm both views before you publish.
7. Keep strong visuals readable. Transparent files, custom backgrounds, or separate desktop and mobile media can change contrast and cropping, so test the final combination for clarity.
8. Use simple styling for shared areas. Leave default-style colors and backgrounds in place when you want the grid to blend in; use explicit overrides only when you want this section to stand apart.