Building web pages with metaobjects

You can use metaobjects to build 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 use this feature, you need to:

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 activate the Web pages feature manually 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 features for custom data.

Activate 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 manually

To activate the feature for your metaobjects, select Web pages in the Features section of your metaobject definition.

Steps:

1. In your Shopify admin, go to Settings > Custom data.
2. Click the metaobject that you want use to create web pages.
3. In the Access options section, keep Storefronts selected.
4. In the Features section of the metafield, select Web pages. The Web pages section is displayed in the metaobject definition.
5. In the 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.

You can create your metaobject template in the theme editor. You can get to the theme editor from the metaobject definition, individual entries, or the online store channel. In the theme editor, click the page selector, find your metobject definition, and then click Create template.