Building web pages with metaobjects

You can use metaobjects to build repeatable landing pages for your online store. For example, if you have an ambassador program, then you can create a web page for each ambassador with a biography, social media links, and images.

To create a web page with metaobjects, you need to complete the following steps:

1. Create a metaobject definition with Storefront access and, optionally, activate the Web pages feature manually.
2. Create entries for the metaobject definition.
3. Create a metaobject template for your web page.

Note

If you don't manually activate the Web pages feature in the metaobject definition, then when you create a metaobject template from the theme editor, the Web pages feature is automatically activated for the metaobject definition.

Learn more about options for custom data.

Activate the Web pages feature and create a theme template

After you have a metaobject definition created and create metaobject entries, you can create a template for the metaobject in the theme editor.

After you select the relevant metaobject from the page selector, you can customize it: add sections, add blocks, and edit settings. You can use dynamic sources to connect your metaobject definition fields. For example, if you're creating pages for your ambassador with images, then you might want to add in an image with text and then connect the metaobject entries by clicking the dynamic source icon:

Learn more about displaying metaobjects on your online store and learn more about using dynamic sources.

Create a metaobject template in the theme editor

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Open the page selector at the top of the page.

4. Click Create metaobject template. In the dialog, click the metaobject that you want to use for your template. You can edit what metaobject field is used for the Page title and the Meta description, and you can edit the URL handle in the Search engine listing section. The template is automatically named with the same name as your metaobject definition.

5. Click Create template.

6. After you create the template, you can add sections, add blocks, and edit settings to customize the template. You can use dynamic sources to connect your metaobject definition fields. For example, if you're creating pages for your ambassador with images, then you might want to add in an image with text and then connect the metaobject entries by clicking the dynamic source icon.

7. Click Save.

After you create your theme template, you can link to the page from a section on your homepage. You can also add the link manually in your navigation menu in the Link field. Learn more about adding a link to your navigation menu.

Activate the Web pages feature

To activate the feature for your metaobjects, select Publish entries as web pages in the Options section of your metaobject definition.

Steps:

1. From your Shopify admin, go to Settings > Custom data.

2. Click the metaobject that you want use to create web pages.

3. In the Options section, ensure that Storefronts access is activate.

4. In the Options section, select Publish entries as web pages.

5. In the publish entries as web pages section, do the following:

   1. Choose which fields will create the page title and meta description for your search engine listing. Enable in Online Store is selected by default. If you have a Hydrogen storefront, then deselect Enable in Online Store.
   2. Optional: customize the URL handle.

6. Click Save.

After you create the metaobject definition and activate the Web pages feature, you need to add metaobject entries.

Edit metaobject entries in theme editor

You can edit metaobjects directly from the online store editor when working on metaobject templates.

When building templates for metaobject pages, you can open a currently previewed metaobject entry and make edits in-line in either of the following ways:

• Click the entry title when working with a metaobject theme template:

  

• Click the Edit value when working with connected fields in Theme settings.