Logo list

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Logo list section lets you showcase key partner, client, or affiliation logos in a customizable and responsive layout. By adding well-known or trusted logos, you help build credibility and highlight important relationships. This section adapts easily to different design needs and displays beautifully on any device.

⚠️ Important: Displaying recognizable logos with the Logo list section can quickly increase your site's trust factor and reinforce professionalism for visitors.

Key components and functionality

Section introduction

The Logo list section provides flexible tools for displaying partner brands, certifications, or noteworthy associations. With a range of options for alignment and layout, you can easily emphasize trust and professionalism while keeping your presentation clean and visually balanced.

Horizontal alignment

Decide how your logos align within the section to ensure a polished and intentional appearance.

1. Left

2. Center

   1. Default

3. Right

Column count settings

Customizing the column count makes your logo grid look great on every device.

1. Desktop columns

   1. Choose how many logos appear in each row on large screens.

      1. Range: 1–12

      2. Default: 8

2. Tablet columns

   1. Set columns per row specifically for tablets.

      1. Range: 0–8

      2. Default: 0 (inherits desktop setting unless changed)

      3. Setting to 0 means the tablet uses the desktop column count.

3. Mobile columns

   1. Adjust for the best look on mobile devices.

      1. Range: 1–4

      2. Default: 2

📝 Note: Carefully adjusting column values per device keeps your logo grid easy to read and visually appealing.

Supported block types

You can extend the Logo list section with different types of blocks for added flexibility.

1. Button

   1. Add a call to action, such as “View more partners.” Customize style, icon, and placement for maximum impact.

2. Logo item

   1. Add each logo using a dedicated block. Fine-tune the image, width, caption, link, and visibility for a tailored presentation.

3. Rich text

   1. Insert formatted text to introduce the logo set, clarify details, or highlight its importance, with support for bold and italic styling, plus links.

💡 Tip: Use a single logo per block for precise control. Adjust captions, image sizing, and links for each logo for the cleanest display.

Usage notes

Make sure your column counts fit with your overall layout for the cleanest and most effective appearance. Provide meaningful alt text for each logo to support accessibility for all users. Optimize image files so your page loads quickly on every device size.

If you want a logo to link elsewhere, consider enabling the option to open it in a new tab for a smoother user experience. Use Rich text blocks to add context, introduce your logo grid, or clarify its significance.

The Logo list section is built to adapt responsively. Always preview your section on multiple devices to ensure a seamless and attractive experience for every visitor.

⚠️ Important: Use images with consistent sizing, transparent backgrounds, and optimize your column counts to ensure your Logo list section is accessible, polished, and effective.