Manage metaobjects

Metaobjects in Shopify empower merchants to define and manage custom data models on their storefronts. Learn more about what metaobjects are here.

Add a new metaobject definition

You can add a new metaobject definition to your storefront in Shopify:

1. From your Shopify admin, go to Content > Metaobjects.
2. Click Add definition.
3. Fill in the fields to define your metaobject:
   • Name - The name of the metaobject definition.
   • Fields - Add fields to the metaobject definition which will define your object's structure.
   • Access Options - check Storefronts
4. Click Save.

Add a new metaobject entry

You can add a new metaobject entry to your storefront in Shopify:

1. From your Shopify admin, go to Content > Metaobjects.
2. Click on the metaobject definition you want to add a new entry to.
3. Click on Add entry.
4. Fill out the fields you defined in the metaobject definition.
5. Click Save.

Add a new metaobject section to your codebase

You can add a new metaobject section in your Storefront repository.

Here's an example of how to add a new metaobject section for a text block we created in the previous steps:

1. Create a new section folder in app/sections with the following structure:

• MetaobjectTextBlock.schema.ts containing your component's schema. Use dataSource to pull in the metaobject data from Shopify.

    export function Schema() {
      return {
        category: 'Text',
        label: 'Text Block',
        key: 'metaobject-text-block',
        previewSrc:
          'https://cdn.shopify.com/s/files/1/0671/5074/1778/files/text-block-preview.jpg?v=1675730349',
        dataSource: {
          source: 'shopify', // where the data is coming from, in this case Shopify
          type: 'metaobject', // what type of data it is, in this case a metaobject
          reference: {
            type: 'text_block',  // what the definition is called in Shopify
          },
        },
        fields: [],
      };
  }
  

  CopyCopied!

• MetaobjectTextBlock.tsx containing your component's code. You can reference the cms prop to get the fields needed based off of what you defined in Shopify for the metaobject.

    export function MetaobjectTextBlock({ cms }) {
      const fields = cms?.dataSource?.reference?.fields?.reduce((acc, field) => {
        acc[field.key] = field.reference || field.value;
        return acc;
      }, {});
  
      const { button_link, button_link_text, heading, subtext } = fields;
  
      return (
        <div className="your-container-styles">
          {heading && <h1>{heading}</h1>}
          {subtext && <div>{subtext}</div>}
          {button_link && <a href={button_link}>{button_link_text}</a>}
        </div>
      );
    }
  

  CopyCopied!

• index.ts exporting your new section component.

    export {MetaobjectTextBlock} from './MetaobjectTextBlock';
  

  CopyCopied!

2. Register the new section in app/sections/index.tsx:

   import { MetaObjectTextBlock } from './MetaObjectTextBlock';
   
   export function registerSections() {
     registerSection(MetaObjectTextBlock, { name: 'meta-object-text-block' })
   }
   

   CopyCopied!

3. Now, when you navigate to Pack's Customizer, you should see the new metaobject section available to add to your page. Once you add the section to your page, you will have access to all the entries you created in the Shopify admin.

Use metaobject sections in Pack's Customizer

Once you've added a new metaobject section to your codebase, you can use it in Pack's Customizer to add content to your pages.

1. Navigate to Pack's Customizer.
2. Click on + to add a new section to your page.
3. Select Add New Section.
4. Select the Metaobjects tab.
5. Select the metaobject section you wish to add and press Add Selected.
   
6. Click on the newly added section to select the metaobject entry you want to display.
   
7. The metaobject section will now display the content from the selected entry.