> ## 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 page

> Customize the layout and features of your vendors page.

The vendors page displays a list of brands or manufacturers featured in your store. You can customize vendor card appearance, logos, alphabetical navigation, and metaobject connections to create an organized directory of your brand partners.

<img src="https://mintcdn.com/digifist/FSR8ji_9Ai8Bv4ZR/images/theme/release/page-vendors.png?fit=max&auto=format&n=FSR8ji_9Ai8Bv4ZR&q=85&s=88bb8b1de1c904f02a155b3f18184aa2" alt="Vendors page overview" width="2880" height="2278" data-path="images/theme/release/page-vendors.png" />

## What this section controls

This section manages:

* **Vendor directory display** - Showcase all brands/manufacturers in your store
* **Vendor logos** - Display brand logos with customizable height
* **Alphabetical navigation** - Enable A-Z quick navigation for browsing
* **Metaobject integration** - Connect to Shopify metaobjects for vendor data
* **Vendor cards** - Customize card appearance and color scheme
* **Section layout** - Adjust section width, color scheme, and spacing

## Getting started

<Steps>
  <Step title="Create vendor metaobject definition">
    You need to create a metaobject definition for vendors.

    1. In the Shopify admin, go to **Content → Metaobjects → Add definition**
    2. Create a **Vendor** metaobject definition:
       * **Name:** Vendor
       * **Handle:** vendor
    3. Add following fields to the definition:

    | Field Name | Type                   |
    | :--------- | :--------------------- |
    | Name       | One : Single line text |
    | Logo       | One : Multi-line text  |
    | Image      | One : Image (File)     |

    4. Save the definition

    <Warning>
      Field keys (handles) must be exactly: `name`, `logo`, `image`. If the handles differ, the theme will not be able to read the vendor data.
    </Warning>
  </Step>

  <Step title="Add vendor entries">
    Create individual vendor entries in the metaobject:

    1. Go to **Content → Metaobjects → Vendor**
    2. Click **Add entry**
    3. Fill in vendor details (Name, Logo, Image)
    4. Repeat for all vendors
  </Step>

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

  <Step title="Navigate to Vendors page">
    In the left sidebar, click **Pages** > **Vendor list**
  </Step>

  <Step title="Link metaobject">
    In the Vendor List section, select the created **Vendor** metaobject definition
  </Step>

  <Step title="Configure display settings">
    Enable logo display, alphabetical navigation, and set logo height and color scheme
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/FSR8ji_9Ai8Bv4ZR/images/theme/release/page-vendors-metaobject.png?fit=max&auto=format&n=FSR8ji_9Ai8Bv4ZR&q=85&s=93ffdbf0c2d1f2575b458948457b004d" alt="Vendor metaobject setup" width="760" height="826" data-path="images/theme/release/page-vendors-metaobject.png" />

## Section Settings

<Tabs>
  <Tab title="Vendor Display">
    Control how vendor information is displayed on the page.

    <AccordionGroup>
      <Accordion title="Show vendor logo">
        **Type:** Toggle\
        **Default:** Enabled

        Displays the vendor's logo when available from the metaobject. If disabled, only vendor names will be shown.

        <Tip>Enable logos for a more visual, brand-focused directory. Logos help customers quickly identify familiar brands.</Tip>
      </Accordion>

      <Accordion title="Logo height">
        **Type:** Range slider\
        **Range:** 20-200 pixels\
        **Default:** 60

        Controls the displayed height of vendor logos. Width adjusts automatically to maintain aspect ratio.

        <Tip>Standard logo height of 50-80px works well for most stores. Larger sizes (100-150px) work better for premium brand showcases.</Tip>
      </Accordion>

      <Accordion title="Show navigation">
        **Type:** Toggle\
        **Default:** Enabled

        Enables alphabetical navigation (A-Z) for browsing vendors. Creates clickable letter links that jump to vendors starting with that letter.

        <Tip>Enable for stores with 20+ vendors to help customers quickly find specific brands. Less useful for smaller vendor lists.</Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Metaobject">
    Connect the vendor data source from Shopify metaobjects.

    <AccordionGroup>
      <Accordion title="Metaobject for vendor list">
        **Type:** Metaobject definition picker\
        **Required:** Yes

        Select the metaobject that contains your vendor entries. This must be the "Vendor" metaobject definition created in setup.

        <Warning>
          Without selecting a metaobject, no vendors will display on the page. The metaobject must have the correct field structure (name, logo, image).
        </Warning>

        <Note>
          After selecting the metaobject, vendor entries will automatically appear on the Vendors page. No additional configuration needed.
        </Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Card Design">
    Customize the appearance of individual vendor cards.

    <AccordionGroup>
      <Accordion title="Color scheme for cards">
        **Type:** Dropdown\
        **Default:** scheme-1

        Sets the color scheme used for vendor cards. Available schemes are defined in **Theme settings > Colors**.

        <Tip>Use a neutral or branded color scheme that complements your vendor logos without overpowering them.</Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    Control the overall section layout, width, and spacing.

    <AccordionGroup>
      <Accordion title="Section width">
        **Type:** Dropdown\
        **Options:** max-w-page, max-w-fluid\
        **Default:** max-w-page

        Maximum width of the vendors section:

        * **max-w-page** - Standard container matching theme width
        * **max-w-fluid** - Wider container utilizing more screen space

        <Tip>Use max-w-fluid for large vendor directories with many brands to display more vendors per row.</Tip>
      </Accordion>

      <Accordion title="Color scheme">
        **Type:** Dropdown\
        **Default:** scheme-1

        Select the color scheme for the overall vendors section. Available schemes are defined in **Theme settings > Colors**.
      </Accordion>

      <Accordion title="Spacing top">
        **Type:** Dropdown\
        **Options:** No (0), S (1), M (2), L (4), XL (6)\
        **Default:** M (2)

        Padding above the vendors section, controlling vertical space from the header.
      </Accordion>

      <Accordion title="Spacing bottom">
        **Type:** Dropdown\
        **Options:** No (0), S (1), M (2), L (4), XL (6)\
        **Default:** M (2)

        Padding below the vendors section, controlling vertical space to the footer.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Metaobject setup requirements

To display vendors on this page, you must create a properly structured metaobject definition.

### Required metaobject structure

**Definition details:**

* **Name:** Vendor
* **Handle:** vendor (must be exactly this)

**Required fields:**

| Field Name | Handle  | Type             | Required |
| ---------- | ------- | ---------------- | -------- |
| Name       | `name`  | Single line text | Yes      |
| Logo       | `logo`  | Multi-line text  | No       |
| Image      | `image` | Image (File)     | No       |

<Warning>
  **Critical:** Field handles must be exactly `name`, `logo`, and `image`. If handles differ, the theme cannot read vendor data.
</Warning>

### Adding vendor entries

After creating the metaobject definition:

1. Go to **Content → Metaobjects → Vendor**
2. Click **Add entry** for each vendor
3. Fill in required information:
   * **Name** - Vendor/brand name (e.g., "Nike", "Adidas")
   * **Logo** - SVG code or HTML for vector logos
   * **Image** - Upload brand logo as image file
4. Save each entry

<Tip>
  Use **Logo** field for SVG code to maintain perfect quality at any size. Use **Image** field for PNG/JPG logos when SVG isn't available.
</Tip>

## Common use cases

<Tabs>
  <Tab title="Multi-brand store">
    Showcase all brands carried in your store.

    **Configuration:**

    * Show vendor logo: Enabled
    * Logo height: 60-80px
    * Show navigation: Enabled (for 20+ brands)
    * Section width: max-w-fluid
    * Color scheme: Neutral (scheme-1)

    **Metaobject:**

    * 50+ vendor entries
    * Consistent logo sizing
    * All entries with logos
  </Tab>

  <Tab title="Premium brands">
    Highlight luxury or premium brand partnerships.

    **Configuration:**

    * Show vendor logo: Enabled
    * Logo height: 100-120px (larger for impact)
    * Show navigation: Disabled (curated list)
    * Section width: max-w-page
    * Color scheme: Elegant/premium scheme

    **Metaobject:**

    * 10-20 vendor entries
    * High-quality logos
    * Selective brand curation
  </Tab>

  <Tab title="Manufacturer directory">
    List product manufacturers for B2B or technical stores.

    **Configuration:**

    * Show vendor logo: Enabled
    * Logo height: 50-60px
    * Show navigation: Enabled
    * Section width: max-w-fluid
    * Color scheme: Professional scheme

    **Metaobject:**

    * 30-100+ manufacturer entries
    * Technical/industrial brands
    * Alphabetical organization
  </Tab>

  <Tab title="Local artisans">
    Feature local makers and small businesses.

    **Configuration:**

    * Show vendor logo: Enabled
    * Logo height: 80-100px
    * Show navigation: Disabled
    * Section width: max-w-page
    * Color scheme: Warm/community scheme

    **Metaobject:**

    * 5-15 artisan entries
    * Personal brand stories
    * High-quality artisan logos/photos
  </Tab>

  <Tab title="Authorized retailers">
    Display authorized dealer/retailer network.

    **Configuration:**

    * Show vendor logo: Enabled
    * Logo height: 60px
    * Show navigation: Enabled (for many locations)
    * Section width: max-w-fluid
    * Color scheme: Brand-aligned scheme

    **Metaobject:**

    * Store location entries
    * Consistent retailer logos
    * Organized by region/alphabetically
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Logo consistency" icon="images">
    Maintain consistent logo sizing and quality across all vendors. Use vector (SVG) logos when possible for crisp display at any size.
  </Card>

  <Card title="Navigation threshold" icon="list-ol">
    Enable alphabetical navigation for stores with 20+ vendors. For smaller lists, navigation adds unnecessary complexity.
  </Card>

  <Card title="Logo height standards" icon="ruler-vertical">
    Standard 50-80px works for most stores. Premium brands: 100-150px. Many small logos: 40-60px to fit more per row.
  </Card>

  <Card title="Metaobject naming" icon="hashtag">
    Use exact handles (`name`, `logo`, `image`) as specified. Any variation will break the integration.
  </Card>

  <Card title="Image optimization" icon="image">
    Optimize logo images before upload. Use PNG with transparency or JPG. Keep file sizes under 200KB for fast loading.
  </Card>

  <Card title="SVG preference" icon="code">
    Prefer SVG logos in the Logo field over image files. SVGs scale perfectly and maintain quality at any size.
  </Card>

  <Card title="Card color scheme" icon="palette">
    Use neutral or branded color scheme that complements vendor logos without competing visually.
  </Card>

  <Card title="Vendor curation" icon="filter">
    For premium positioning, curate vendor list to feature key partnerships. Don't feel obligated to list every brand.
  </Card>

  <Card title="Mobile optimization" icon="mobile">
    Test vendor card layout on mobile. Logos should remain legible. Consider slightly larger logo height for mobile users.
  </Card>

  <Card title="Update frequency" icon="clock">
    Keep vendor list current. Remove discontinued brands, add new partnerships. Update logos when brands rebrand.
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Metaobjects" icon="database" href="https://help.shopify.com/en/manual/custom-data/metaobjects">
    Learn more about Shopify metaobjects and custom data structures
  </Card>

  <Card title="Collection List Page" icon="layer-group" href="/themes/release/pages-templates/collection-list-page">
    Similar list page layout for displaying collections
  </Card>
</CardGroup>