How To Setup Shopify Designers or Brands With Metaobject & Metafields - SOP

Overview

This SOP explains how to set up designer information that displays automatically on product pages using Shopify's metaobjects and metafields system.

What You'll Create:

• Designer Metaobject - A database of all your designers with their info
• Product Metafield - A connection that links products to designers
• Section Files - Display templates that show designer info on product pages

End Result:

When a product is connected to a designer, the product page automatically displays:

• Designer name (linked to collection)
• Designer logo
• Description
• Country of origin
• Size chart button
• Care instructions
• "NEW" badge for new designers
• Links to shop all products by that designer

Prerequisites

• ✅ Shopify store with admin access
• ✅ Theme that supports Shopify 2.0 sections
• ✅ Basic understanding of Shopify admin
• ✅ List of designers you want to add

Part 1: Create Designer Metaobject

Step 1.1: Access Metaobjects

1. Log into Shopify Admin
2. Go to Settings (bottom left corner)
3. Click Custom Data
4. Click Metaobjects tab at top
5. Click Add definition button

Step 1.2: Create Metaobject Definition

Step 1.3: Add Metaobject Fields

Click Add field for each field below:

Step 1.4: Configure Access and Publishing

Access:

• ✅ Storefront access: Enable

Web pages:

• ☐ Web pages (leave unchecked unless you want individual designer pages)

Step 1.5: Save

1. Review all fields
2. Click Save button (top right)
3. You should see confirmation: "Metaobject definition created"

Part 2: Create Product Metafield Definition

Step 2.1: Access Product Custom Data

1. Go to Settings → Custom Data
2. Click Products tab at top
3. Click Add definition button

Step 2.2: Create Metafield Definition

Step 2.3: Set Namespace and Key

1. Click Select namespace and key
2. A modal will appear

For Namespace:

• Select: custom from dropdown

For Key:

• Type: designer (lowercase, singular, no spaces)
• IMPORTANT: If Shopify says "This key already exists," try these alternatives:
  • designer_info
  • product_designer
  • brand
  • designer_reference

3. Click Add to confirm

Final result should show:

OR whatever alternative key you chose

Step 2.4: Select Field Type

Type: Metaobject reference

• From dropdown, select: Metaobject reference

Validation:

• Select: One value (not "List of values")

Metaobjects:

• From dropdown, select: Designers

Step 2.5: Configure Display

Options:

• ✅ Pin this metafield (optional - makes it easier to find)

Step 2.6: Save

1. Review all settings
2. Click Save button
3. You should see confirmation: "Metafield definition created"

Part 3: Add Designer Entries

Step 3.1: Access Metaobject Entries

1. Go to Content → Metaobjects
2. Click on Designers from the list
3. Click Add entry button

Step 3.2: Fill in Designer Information

Required Fields:

• Designer Name: Enter designer name (e.g., "Lulu + Roo")

Optional but Recommended:

• Designer Description: Brand story, heritage, philosophy
• Country: Country of origin
• Designer Image Logo: Upload logo (PNG with transparent background works best)
• Size Chart: Upload size chart image
• Care Instructions: Add formatted care instructions
• New Brand: Check if new (shows NEW badge)
• Designer Collection: Select the collection for this designer's products
• URL: Designer's website
• Featured: Check if featured
• Blog Posts: Select related blog post
• Display Order: Number for sorting (1, 2, 3, etc.)

Step 3.3: Save Designer Entry

1. Review all information
2. Click the Save button
3. Designer is now available to connect to products

Step 3.4: Repeat for All Designers

Repeat Steps 3.1-3.3 for each designer you want to add.

Part 4: Connect Products to Designers

Step 4.1: Edit a Product

1. Go to Products → All products
2. Click on a product to edit

Step 4.2: Find Metafields Section

1. Scroll down on the product edit page
2. Look for Metafields section (usually on the right side)
3. You should see: Designer (or whatever you named it)

Step 4.3: Select Designer

1. Click on the Designer dropdown
2. Select the designer from the list (e.g., "Lulu + Roo")
3. The dropdown shows all designers you created

Step 4.4: Save Product

1. Click the Save button at the top right
2. The product is now connected to the designer

Step 4.5: Bulk Assign (Optional)

For assigning many products at once:

1. Go to Products → All products
2. Click More actions → Bulk editor
3. Select products to edit
4. Add Designer column
5. Select designers from the dropdown for each product
6. Click Save

Part 5: Create Section Files

You'll create 4 section files that display designer information.

Step 5.1: Access Theme Code Editor

1. Go to Online Store → Themes
2. Find your current theme
3. Click Actions → Edit code
4. Find the Sections folder in the left sidebar

Step 5.2: Create Section Files

For each of the 4 sections below, follow these steps:

Process:

1. Click Add a new section
2. Enter the section name (without .liquid extension)
3. Copy the complete code from the appendices
4. Paste into the editor
5. Click Save

Section Files to Create:

Step 5.3: Verify All Sections Created

Look in the Sections folder. You should see:

• ✅ designer-info.liquid
• ✅ designer-badge.liquid
• ✅ designer-care.liquid
• ✅ designer-size-chart.liquid

Part 6: Add Sections to Product Pages

Step 6.1: Access Theme Customizer

1. Go to Online Store → Themes
2. Click the Customize button
3. You'll be in the theme customizer

Step 6.2: Navigate to Product Page

1. At the top of the page, click the page selector dropdown
2. Select Products → Default product
3. OR navigate to any specific product

Step 6.3: Add Designer Sections

For each section you want to add:

1. In the left sidebar, scroll to where you want the section
2. Click Add section button
3. Scroll through the section list to find:
   • Designer Info
   • Designer Badge
   • Designer Care
   • Designer Size Chart
4. Click on the section to add it
5. Drag the section to position it where you want

Step 6.4: Customize Section Settings

Click on each section in the left sidebar to see customization options.

Step 6.5: Preview and Test

1. Use the preview to see how sections look
2. Navigate to different products with different designers
3. Verify correct designer info appears for each product
4. Test on different screen sizes using device preview
5. Click the size chart button to test modal

Step 6.6: Save Changes

1. Click the Save button (top right)
2. Sections are now live on your product pages

🔧 Troubleshooting

Issue 1: "Key already exists" Error

Problem: When creating the product metafield, Shopify says the key already exists.

Solution:

1. Go to Settings → Custom Data → Products
2. Look for an existing metafield with that key
3. Option A: Delete the old metafield if not in use
4. Option B: Choose a different key (e.g., designer_info, product_designer)
5. IMPORTANT: Write down the key you used!
6. Update the liquid code to use your exact key

TO:

Issue 2: Sections Don't Appear in Customizer

Problem: After creating section files, they don't show up in "Add section" list.

Solutions:

1. Refresh the Customizer: Close the tab and reopen Customize
2. Check File Names: Verify sections are named exactly:
   • designer-info (not designer-info.liquid)
   • No typos in names
3. Check Code: Make sure you pasted the complete code, including {% schema %} section
4. Wait: Sometimes it takes 30 seconds to appear

Issue 3: No Designer Info Displaying on Product Page

Problem: Sections are added but show nothing on product page.

Diagnosis Steps:

Step A: Verify Product Has Designer Assigned

1. Edit the product
2. Scroll to Metafields
3. Is the Designer field filled? If NO → assign a designer

Step B: Verify Metafield Key Matches Code

1. Go to Settings → Custom Data → Products
2. Click on the Designer metafield
3. Check the Namespace and key (e.g., custom.designer)
4. Open designer-info.liquid in the code editor
5. Find this line and verify it matches your key

Step C: Check Designer Entry Has Data

1. Go to Content → Metaobjects → Designers
2. Click on the designer
3. Verify fields are filled (especially Name, Logo, Description)

🔄 Maintenance

Adding New Designers

Frequency: As needed

1. Go to Content → Metaobjects → Designers
2. Click Add entry
3. Fill in all fields
4. Click Save
5. Designer is now available to assign to products

Updating Existing Designer Info

Frequency: As needed

1. Go to Content → Metaobjects → Designers
2. Click on the designer to edit
3. Update any fields
4. Click Save
5. Changes appear immediately on all products using that designer

Bulk Assigning Designers to Products

When: Adding many products at once

1. Go to Products → All products
2. Select products (use filters to find products by a specific designer)
3. Click More actions → Bulk editor
4. Add column: Designer
5. Select a designer from the dropdown for each product
6. Click Save

📎 Appendices - Section Code