Skip to main content
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. Vendors page overview

​
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

1

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 NameType
NameOne : Single line text
LogoOne : Multi-line text
ImageOne : Image (File)
  1. Save the definition
Field keys (handles) must be exactly: name, logo, image. If the handles differ, the theme will not be able to read the vendor data.
2

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
3

Open Theme Customizer

From Shopify admin, access the Theme Customizer
4

Navigate to Vendors page

In the left sidebar, click Pages > Vendor list
5

Link metaobject

In the Vendor List section, select the created Vendor metaobject definition
6

Configure display settings

Enable logo display, alphabetical navigation, and set logo height and color scheme
Vendor metaobject setup

​
Section Settings

Control how vendor information is displayed on the page.
Type: Range slider
Range: 20-200 pixels
Default: 60Controls the displayed height of vendor logos. Width adjusts automatically to maintain aspect ratio.
Standard logo height of 50-80px works well for most stores. Larger sizes (100-150px) work better for premium brand showcases.
Type: Toggle
Default: EnabledEnables alphabetical navigation (A-Z) for browsing vendors. Creates clickable letter links that jump to vendors starting with that letter.
Enable for stores with 20+ vendors to help customers quickly find specific brands. Less useful for smaller vendor lists.

​
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 NameHandleTypeRequired
NamenameSingle line textYes
LogologoMulti-line textNo
ImageimageImage (File)No
Critical: Field handles must be exactly name, logo, and image. If handles differ, the theme cannot read vendor data.

​
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
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.

​
Common use cases

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

​
Best practices

Logo consistency

Maintain consistent logo sizing and quality across all vendors. Use vector (SVG) logos when possible for crisp display at any size.

Navigation threshold

Enable alphabetical navigation for stores with 20+ vendors. For smaller lists, navigation adds unnecessary complexity.

Logo height standards

Standard 50-80px works for most stores. Premium brands: 100-150px. Many small logos: 40-60px to fit more per row.

Metaobject naming

Use exact handles (name, logo, image) as specified. Any variation will break the integration.

Image optimization

Optimize logo images before upload. Use PNG with transparency or JPG. Keep file sizes under 200KB for fast loading.

SVG preference

Prefer SVG logos in the Logo field over image files. SVGs scale perfectly and maintain quality at any size.

Card color scheme

Use neutral or branded color scheme that complements vendor logos without competing visually.

Vendor curation

For premium positioning, curate vendor list to feature key partnerships. Don’t feel obligated to list every brand.

Mobile optimization

Test vendor card layout on mobile. Logos should remain legible. Consider slightly larger logo height for mobile users.

Update frequency

Keep vendor list current. Remove discontinued brands, add new partnerships. Update logos when brands rebrand.

Metaobjects

Learn more about Shopify metaobjects and custom data structures

Collection List Page

Similar list page layout for displaying collections