> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vendors

> Display a list of product vendors/brands with optional logos and navigation.

The Vendors section creates a directory of product brands/vendors with optional logos, vendor-specific navigation, and metaobject integration. Perfect for multi-brand stores showcasing their brand partners.

<img src="https://mintcdn.com/digifist/Fib_yVcAfb3mCiba/images/theme/release/sections/vendor-list/vendor-list-overview.png?fit=max&auto=format&n=Fib_yVcAfb3mCiba&q=85&s=ad315c710a0f39c6b33c6f74450ceffa" alt="Vendors section overview" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/vendor-list-overview.png" />

## What this section controls

* Automatic vendor list from product collections
* Optional vendor logo display
* Metaobject integration for enhanced vendor data
* Vendor navigation filtering
* Logo height customization
* Card-based layout with color schemes
* Content alignment options

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Vendors section">
    Add the section to your desired page or template.
  </Step>

  <Step title="Configure vendor display">
    Enable vendor logos and set logo height preferences.
  </Step>

  <Step title="Optional: Add metaobject">
    Connect a metaobject for enhanced vendor information.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/Fib_yVcAfb3mCiba/images/theme/release/sections/vendor-list/vendor-list-location.png?fit=max&auto=format&n=Fib_yVcAfb3mCiba&q=85&s=d67193664c67dfe12942364e81189189" alt="Vendors section in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/vendor-list-location.png" />

## Section settings

<Tabs>
  <Tab title="Vendors">
    ### Show vendor logo

    Displays vendor logos when available.

    **Default:** False

    <Note>
      Vendor logo will be displayed if available in your product data or metaobject.
    </Note>

    ### Show navigation

    Controls where vendor navigation filtering appears.

    **Available options:**

    * **Desktop:** Desktop only
    * **Mobile:** Mobile only
    * **Both:** All devices

    **Default:** Both

    <Tip>
      Navigation allows customers to filter vendors alphabetically or by category.
    </Tip>

    ### Metaobject for vendors

    Connect a metaobject definition for additional vendor data.

    * Text field for metaobject handle

    <Note>
      Use metaobjects to add custom vendor information like descriptions, logos, or links.
    </Note>

    ### Logo height

    Controls the height of vendor logos.

    **Range:** 10 – 100 px

    **Default:** 50 px

    <Tip>
      Default value is 50px. Adjust based on your logo dimensions for optimal display.
    </Tip>

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/vendor-list/vendor-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=6aec16daf124c517d2c11c0473ea41d7" alt="Vendor settings" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/vendor-settings.png" />
  </Tab>

  <Tab title="Layout">
    ### Color scheme for cards

    Background and text colors for vendor cards.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    ### Content alignment

    Controls alignment of vendor names and logos within cards.

    **Available options:** Start, Center, End

    **Default:** Center

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/vendor-list/layout-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=582d8fbd1ee4c01c3f9ccfd609f9cd5a" alt="Layout settings" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/layout-settings.png" />
  </Tab>

  <Tab title="Settings">
    ### Color scheme

    Overall section background and text colors.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    ### Section container width

    Maximum width of section.

    **Available options:**

    * **Page:** Standard page width
    * **Fluid:** Wider than page width

    **Default:** Page

    ### Spacing top

    Space above section.

    **Available options:** No, S, M, L, XL

    **Default:** M

    ### Spacing bottom

    Space below section.

    **Available options:** No, S, M, L, XL

    **Default:** M

    <img src="https://mintcdn.com/digifist/IPoCyzc8nWn8VCIB/images/theme/release/sections/vendor-list/section-settings.png?fit=max&auto=format&n=IPoCyzc8nWn8VCIB&q=85&s=4e4d4fa6ed442ef7c06bd492e3cb2cc4" alt="Section settings" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/section-settings.png" />
  </Tab>
</Tabs>

## How vendors are populated

The Vendors section automatically collects all unique vendors from your product catalog:

* Extracts vendor names from product metadata
* Displays each vendor as a clickable card
* Links to vendor-specific collection pages
* Shows vendor logo when available

## Metaobject integration

Enhance vendor listings with metaobjects:

1. Create a metaobject definition for vendors in Shopify admin
2. Add fields like logo, description, website URL, social links
3. Enter the metaobject handle in section settings
4. Section automatically displays enhanced vendor information

<img src="https://mintcdn.com/digifist/Fib_yVcAfb3mCiba/images/theme/release/sections/vendor-list/metaobject-setup.png?fit=max&auto=format&n=Fib_yVcAfb3mCiba&q=85&s=1b1956cc746957690c9fa6e40491e0d3" alt="Metaobject setup for vendors" width="3280" height="2186" data-path="images/theme/release/sections/vendor-list/metaobject-setup.png" />

## Best practices

* Enable vendor logos for visual brand recognition and credibility
* Set logo height between 40-60px for optimal card display
* Use metaobjects to add rich vendor information beyond basic product data
* Enable navigation on both devices for better filtering experience
* Use center alignment for logo-centric displays
* Use start alignment when including vendor descriptions
* Match card color scheme with your brand colors
* Keep vendor names consistent across products for accurate grouping
* Test with different logo sizes to find optimal balance
* Ensure vendor logos are high-resolution for crisp display

## Common use cases

* **Multi-brand stores** - Showcase all brands carried in your store
* **Designer directory** - Display fashion designers or artists
* **Manufacturer listings** - Show product manufacturers
* **Brand partnerships** - Highlight brand collaborations
* **Wholesale portals** - Vendor directories for B2B stores
* **Marketplace platforms** - Display all sellers or creators
* **Beauty brands** - Cosmetics and skincare brand showcases

## Related guides

<Card title="Page: Vendors" icon="building" href="/themes/release/page-vendors">
  Learn more about the vendors page template
</Card>

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>
