
1. Purpose
Displays brand logos in a grid or slider, helping customers browse featured brands and access related pages.
2. Common use cases
Homepage
Brand directory
Featured partners
Retailer or supplier showcase
Collection landing page
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Brands
4. Main blocks
Logo item: Adds a brand logo with an optional link.
5. Key settings
5.1. Logo item
Setting | Description |
|---|---|
Image | Uploads the brand logo. |
URL | Sets the destination when customers click the logo. |
5.2. General settings
Setting | Description |
|---|---|
Color scheme | Controls the section colors. |
Enable item border | Adds borders around brand logos. |
Open tab | Opens logo links in the current or a new browser tab. |
Effect | Applies an optional hover effect to logos. |
5.3. Slider and responsive layout
Setting | Description |
|---|---|
Use prev/next button | Displays slider navigation arrows. |
Use dots | Displays pagination dots. |
Items per row | Sets the number of logos on desktop, tablet, and mobile. |
5.4. Section layout
Setting | Description |
|---|---|
Page width | Controls the maximum content width through Theme settings. |
Top padding | Adjusts spacing above the section. |
Bottom padding | Adjusts spacing below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
6. Best practices
Use logo images with consistent dimensions.
Prefer transparent PNG or SVG files.
Add links only to active brand pages.
Show four to six logos per row on desktop.
Use one or two logos per row on mobile.
Avoid strong hover effects that reduce logo clarity.
7. Common issues
Issue | Solution |
|---|---|
Logo is not showing | Upload an image in the Logo item block. |
Logo is blurry | Use a larger PNG or SVG file. |
Logo opens the wrong page | Check the URL in the Logo item block. |
Slider arrows are missing | Enable prev/next buttons and add enough logo items. |
Logos have inconsistent sizes | Use images with matching dimensions and whitespace. |
Mobile layout looks crowded | Reduce the number of items per row. |
