# Logo list

Use the **Logo List** section to display rows of logos of your partners or vendors, giving your customers an at-a-glance overview.

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-865ac15bf518e859cd2bfd575d2bfecfde0e812b%2Flogo-list.jpeg?alt=media)

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Logo list**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add logos

Upload logo images with a link to your partners’ or customers’ sites.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on a **Logo** block to open the settings.

   > Click **(+) Add block** to add a new **Logo** block.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under *Image*, click **Select image** to choose or upload a logo image.
3. Add full **Link** make the entire image a clickable link.

   > Make sure you copy and paste the full URL, including **`https://`** at the start.
4. Return to the list of your template sections in the sidebar and repeat this process until you've added all the Logo blocks you need.
5. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
6. Click **Save**.

</details>

## Section layout

The **Logo list** section settings apply to all Logo blocks. You can adjust the **Columns per row**, tweak the **Spacing between logos**, add a **Heading**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Logo list** section to open the section settings.
2. Use the **Columns per row** slider to adjust the number of Logos per row, between *2*, *3*, *4*, *5*, or *6*.
3. Use the **Spacing between logos** slider to set the distance between logo image from 5px to 100px.

   > The height of the logo images will adjust according to the spacing. A large amount of spacing will display smaller logos.
4. Change the **Heading** text to display above the section.
5. Click **Save**.

</details>

## Section style

Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the section to find the **Section style** settings.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-309687bb9b31e7f3d33217dea186736e74109ff0%2Ftheme-section-styles.jpeg?alt=media)
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.

   > Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-dea3714e6b027ccef067f49888512f7fee4715ee%2Ftheme-section-spacing.jpeg?alt=media)
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.

</details>

## Settings reference

Click the **Logo blocks** to find the following settings.

| Setting | Description                                                                                 |
| ------- | ------------------------------------------------------------------------------------------- |
| Image   | Select or upload a logo image. We recommend that all logo images have the same proportions. |
| Link    | Select or paste a URL to direct visitors to another page.                                   |

Click the **Logo list** section to find the following settings.

| Setting               | Description                                                                                                                                                                                    |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Columns per row       | Select the number of collections to show in each row for desktop.                                                                                                                              |
| Spacing between logos | <p>Set the distance between logo image from 5px to 100px.<br><br>The height of the logo images will adjust according to the spacing. A large amount of spacing will display smaller logos.</p> |
| Heading               | Add text to display as a heading for the section.                                                                                                                                              |

#### Section style

| Setting                     | Description                                                                                                                                                                                                                                   |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation            | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more.                                     |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing                     | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.                                                                                                                                  |
| Spacing amount              | Increase or decrease the amount of space around the section: either Full, Half, or Minimum.                                                                                                                                                   |

<br>

***

> **Related links**\
> [Text columns with images](https://help.fluorescent.co/spark/pages/theme-sections/text-columns-with-images)
