# Brand logos

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(40)_WNFrlZRp.jpg)

The **Brand logos** section allows you to display logos in a customizable grid format—ideal for building trust, showcasing retail partnerships, or promoting house brands.

## How to add a Brand logos section to your Shopify store

<Hint type="success">

Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Brand logos**.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Brand logos section

### Section settings

#### General

* **Color scheme:** Apply one of your theme’s preset color styles. Learn more: [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors)

#### Section header

* **Text alignment:** Set heading/subheading alignment (Left, Center, Right).

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/hyper-theme/image_zFRa6x8T.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/hyper-theme/image_uKouOs1S.png)

</Tab>

<Tab title="Right">

![image](https://docs-assets.foxecom.app/hyper-theme/image_K2kA61dg.png)

</Tab>
</Tabs>

* **Text alignment on mobile:** Control mobile-specific header alignment.
* **Subheading & Heading:** Add section titles.
  * *For animated heading, learn more:* [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)
* **Highlight settings:** Customize style, font, and text color for animated headings.
* **Heading size & description size:** Set appropriate font sizes for title and supporting text.
* **Button settings**:
  * **Button label:** Set a call-to-action label like "Shop All Brands".
  * **Button link:** Add a URL to your brand collection or all-collections page.
  * **Button style:** Control what style the button uses.
  * **Button icon:** Add an icon after the label.

![image](https://docs-assets.foxecom.app/hyper-theme/image_lCCqrtDr.png)

#### Image settings

* **Image padding:** Add spacing around each logo (None, Small, Medium).
* **Image width:** Define the size of each logo (Medium/Large/Full width).



<Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(44)_QrgsJdBw.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

#### Grid settings

* **Number of columns on desktop:** Choose how many logos to show in a row (2–10).
* **Column gap & Row gap:** Adjust spacing between logos.
* **Show grid border:** Add borders between each logo for visual structure.

<Tabs>
<Tab title="Grid border enabled">

![image](https://docs-assets.foxecom.app/hyper-theme/image_7QbAx9m0.png)

</Tab>

<Tab title="Grid border disabled">

![image](https://docs-assets.foxecom.app/hyper-theme/image_WfF8zB8a.png)

</Tab>
</Tabs>

**Mobile Layout**

* **Number of columns on mobile:** Choose 1–3 logos per row.

![image](https://docs-assets.foxecom.app/hyper-theme/image_Gr4gpbJ3.png)

* **Enable swipe on mobile:** Activate horizontal scroll behavior for mobile users.

### Block settings

Each logo is a block under the Brand logos section.

<Hint type="success">

Steps:

1. Click **Add Log**.
2. Upload a logo image.
3. Add a **Link** if you'd like the logo to redirect to a collection or brand page.

</Hint>

✅ Tip: All logos should be the same color scheme and dimensions for a clean look.

## FAQs

### **Can I link each logo to a unique page?**

👉 Yes! Use the link field in each logo block.

### **Can I use brand logos in the header or footer too?**

👉 This section is currently supported in the **Template** content.