Logo list shows a row of up to twelve logos: publications that have featured you, stockists, or brands you carry. Each logo can link somewhere.
Where to find it
In the theme editor, click Add section and choose Logo list. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Logos sit in a grid, with Columns on desktop setting how many share a row. Logo width caps how wide each logo is shown. 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 Number sections 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. |
| Columns on desktop | 2 to 8. Default: 5. | How many logos sit in a row on desktop. |
| Logo width | 60 px to 240 px. Default: 140 px. | The widest each logo is shown. |
| 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. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| 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. |
| Link | Link. | Optional. Where the logo links to. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Logo | Twice the Logo width, for example 280 px wide for a 140 px logo | A transparent PNG. 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
- Five or six logos in one row read better than twelve in two.
- Use the eyebrow or heading to say what the logos are: "As seen in", "Stocked by".