Page brands
1. Purpose Displays brands in a searchable or filterable page, allowing customers to browse products by vendor, brand name, or logo. 2. Common use cases Brand …
2 phút đọc
Trong trang này
1. Purpose
Displays brands in a searchable or filterable page, allowing customers to browse products by vendor, brand name, or logo.
2. Common use cases
Brand directory
Shop-by-brand page
Vendor listing
Brand collection navigation
3. How to access
Shopify Admin → Online Store → Themes → Customize → Pages → Brands → Page Brands
The Brands page template may only be available in the published theme.
4. Brand data sources
The section supports two sources:
Shop vendor: Uses vendor names from store products.
Metafield: Uses custom brand entries created with metaobjects.
Use Metafield when you need custom logos, links, images, or assigned collections.
5. Create custom brand data
5.1. Create the Vendor metaobject
Go to:
Shopify Admin → Settings → Custom data → Metaobjects → Add definition
Create a definition named Vendor with these fields:
Field | Type | Purpose |
|---|---|---|
Name | Single line text | Brand name |
Image | File | Brand logo or image |
Link | URL | Custom brand URL |
Collection | Collection | Associated collection |
5.2. Add brand entries
Go to:
Shopify Admin → Content → Metaobjects → Vendor → Add entry
Enter the brand name, image, link, and collection, then save the entry.
5.3. Create the page metafield
Go to:
Shopify Admin → Settings → Custom data → Pages → Add definition
Use:
Name: Vendor
Namespace and key:
theme.vendorType: Metaobject reference
Reference: Vendor
5.4. Assign data to the Brands page
Create or open the Brands page, assign the Brands template, and select the required Vendor metaobject entries in the page metafield.
6. Key settings
Setting | Description |
|---|---|
Layout brands | Selects the brand-list layout. Available for the Metafield source. |
Source brands | Selects Shop vendor or Metafield. |
Name tabs brands | Displays alphabetical or numerical filter tabs. |
Image brands | Displays brand logos instead of text-only names. |
Color scheme | Controls section colors. |
Enable section full width | Expands the section across the browser width. |
Section padding | Adjusts spacing above and below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
Custom CSS | Adds custom styles to this section only. |
7. Best practices
Use consistent logo dimensions and transparent backgrounds.
Keep brand names consistent with product vendor names.
Use alphabetical tabs when displaying many brands.
Assign each brand to the correct collection or link.
Use the Metafield source for greater control over brand content.
8. Common issues
Issue | Solution |
|---|---|
Brands are not showing | Select the correct brand source and add the required data. |
Brand layout options are unavailable | Change Source brands to Metafield. |
Brand image is missing | Add an image to the Vendor metaobject entry and enable Image brands. |
Brand opens the wrong page | Check the Link or assigned Collection field. |
Page metafield is missing | Create the page metafield using |
Brands template is unavailable | Publish the theme or create the page template in the published theme. |