Brand list shows up to twelve logos: the labels you stock, the stores that carry you, or the publications that have featured you. Each logo can link somewhere, for example to that brand's collection.
Where to find it
In the theme editor, click Add section and choose Brand list. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Layout sets how the logos are shown:
- Grid: the logos in centered rows that wrap to fit the screen.
- Scrolling row: one row that moves slowly across the full width of the page in a loop. It stops when a customer hovers over it or moves keyboard focus into it, and a pause button lets customers stop it. For customers who have asked their device to reduce motion it stands still, and the logos wrap into rows instead.
Logo height sets how tall every logo is shown, so logos of different shapes line up. With Show logos in grayscale on, logos are shown in gray and return to full color on hover and keyboard focus, which keeps a mix of brand colors from fighting your own.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Show editorial numbering on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Small. | How large the heading is set. |
| Text | Formatted text. | Optional text under the heading. |
| Layout | Grid or Scrolling row. Default: Grid. | Grid shows centered rows; Scrolling row shows one row that moves slowly across the page. |
| Logo height | 24 px to 96 px. Default: 40 px. | How tall each logo is shown. Wide logos get wider, never taller. |
| Show logos in grayscale | On or off. Default: on. | Shows logos in gray until they are hovered or focused. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Small. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Small. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 12 blocks.
Logo
One logo.
| Setting | Options | What it does |
|---|---|---|
| Logo | Image. | The logo image. |
| Brand name | Text. | The brand's name. Screen readers read it aloud in place of the logo, so always fill it in. Without a logo image, the name is shown as text. |
| Link | Link. | Optional. Where the logo links to. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Logo | Twice the Logo height, for example 80 px tall for a 40 px logo | A transparent PNG or an SVG. Trim empty space around the logo before uploading, so logos line up and look the same size. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Use the eyebrow or heading to say what the logos are: "The labels we stock", "As seen in".
- The scrolling row needs at least five or six logos to look continuous. With fewer, use the grid.