> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/cello-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/cello-documentation/sections/logo-list.md).

# Logo list

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Logo List** section is designed to showcase multiple brand, partner, supplier, certification, or trusted-company logos in a clean and visually balanced layout.&#x20;

Logos can be displayed in multiple columns or presented as a carousel with optional auto-rotation.

{% hint style="info" %}
**Recommendation Size**\
Logo image size: 200x40
{% endhint %}

## How to Add Logo List

{% hint style="success" %}
**Steps**

1. Go to **Online Store → Themes** in Shopify Admin.
2. Click **Customize** on the Cello theme.
3. Open the page where you want to add the section.
4. Click **Add section**.
5. Select **Logo list**.
6. Click **Add Logo** to add a logo block.
7. Upload or select the required logo image.
8. Add an optional **Description** and **Link**.
9. Repeat **Add Logo** for additional brands or partners.
10. Configure the layout, columns, carousel, and alignment settings.
11. Adjust the color scheme and section spacing.
12. Click **Save**.
    {% endhint %}

<table><thead><tr><th width="271">Section</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>Displays the logo list across the full available width.</td></tr><tr><td>Heading</td><td>Add a heading above the logo list.</td></tr><tr><td>Heading size</td><td><p>Choose the heading size:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Choose the heading alignment:</p><ul><li>left</li><li>center</li><li>Right</li></ul></td></tr><tr><td>Enable bottom border</td><td>Adds a bottom border to the section.</td></tr><tr><td>Enable separator</td><td>Displays a separator between the logo images.</td></tr><tr><td>Content alignment</td><td><p>Controls the horizontal alignment of the logo content within the section.</p><ul><li>left</li><li>center</li><li>Right</li></ul></td></tr><tr><td>Auto-rotate slides</td><td><p>Automatically moves through the logos when the carousel layout is enabled.</p><p></p><p>This is useful when there are more logos than can comfortably fit within the available space.</p></td></tr><tr><td>Change message every</td><td><p>Controls how frequently the carousel automatically changes to the next set of logos.</p><p></p><p>You can set a minimum of “3” seconds and a maximum of “9” seconds.</p></td></tr><tr><td>Number of columns on desktop</td><td>Controls how many logo items are visible at the same time on desktop screens. You can show a minimum of “3” and a maximum of “7” logo.</td></tr><tr><td>Enable carousel on desktop</td><td><p>Converts the desktop logo list into a horizontally sliding carousel.</p><p></p><p>When enabled, customers can navigate through additional logos using the slider controls.</p><p></p><p>This is particularly useful when you have a large number of logos.</p></td></tr><tr><td>Slider arrow position</td><td><p>Controls where the carousel navigation arrows appear.</p><ul><li><strong>Inline —</strong> arrows appear alongside the logo content.</li><li><strong>Bottom —</strong> arrows appear below the logo list.</li></ul></td></tr><tr><td>Slider arrow style</td><td><p>Controls the appearance of the carousel navigation.</p><ul><li><strong>Button —</strong> Displays arrows inside visible button elements.</li><li><strong>Icon —</strong> Displays a simpler icon-based navigation style.</li></ul></td></tr><tr><td>Show secondary background</td><td><p>Adds a separate background container behind the logo list.</p><p></p><p>This allows the logos to stand out from the main section background.</p><p></p><p><strong>Note:</strong> This option is not available when <strong>Make section full width</strong> is enabled.<br><br><strong>Secondary background color</strong><br>Sets the background color used for the secondary logo container.</p><p></p><p>Choose a color that provides sufficient contrast with the logo images.</p></td></tr><tr><td>Color scheme</td><td><p>Controls the overall colors used within the Logo List section, including the background and text.</p><p>You can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Mobile layout</td><td>The logo list slides when the checkbox is activated and the logo list does not slide when the checkbox is not active.</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FseqwRyTFezbzyKwe0HKt%2Flogolist.png?alt=media&amp;token=3eaa9f02-4277-456c-84ec-27857298373f" alt=""><figcaption></figcaption></figure></div>

## Add logo

Each logo displayed in the section is added as an individual **Logo** block.

Click **Add Logo** to create a new logo item.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td><p>Select or upload the logo image that you want to display.</p><p></p><p>The selected image is shown within the logo item and automatically adapts to the available space.</p></td></tr><tr><td>Description</td><td><p>Add an optional description for the logo.</p><p></p><p>This can be used to provide additional information about the brand or improve accessibility.</p></td></tr><tr><td>Link</td><td>Add a URL that customers should visit when they click the logo.</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2Fjk2ar5pgswl5Spybsvoo%2Flogolist-block.png?alt=media&amp;token=b2b46cb5-b548-40ae-97a4-268125766f58" alt=""><figcaption></figcaption></figure></div>

## Best Practices

* Use logos with **similar visual dimensions**.
* Prefer transparent **PNG or SVG** files.
* Keep the number of logos manageable for the selected column count.
* Use the carousel when displaying a larger collection of logos.
* Maintain consistent spacing between logo items.
* Use links when the logo represents a clickable brand or partner.
* Ensure logos have sufficient contrast against the background.
* Check the layout on both **desktop and mobile** before publishing.