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 definitionwithStorefront accessand, optionally,activate the Web pages feature manually.
  2. Create entries for the metaobject definition.
  3. Create a metaobject templatefor your web page.

Learn more aboutfeatures 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:

Connect dymamic source icon

Learn more aboutdisplaying metaobjects on your Online Storeand learn more aboutusing dynamic sources.

Create a metaobject template in the theme editor

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, and then clickCustomize
  3. Open the page selector at the top of the page.
  4. ClickCreate 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 thePage titleand theMeta description, and you can edit the URL handle in theSearch engine listingsection. The template is automatically named with the same name as your metaobject definition.
  5. ClickCreate 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. ClickSave.

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 theLinkfield.Learn more about adding a link to your navigation menu.

Activate the Web pages feature manually

To activate the feature for your metaobjects, selectWeb pagesin theFeaturessection of your metaobject definition.

Steps:

  1. In your Shopify admin, go toSettings>Custom data.
  2. Click the metaobject that you want use to create web pages.
  3. In theAccess optionssection, keepStorefrontsselected.
  4. In theFeaturessection of the metafield, selectWeb pages. TheWeb pagessection is displayed in the metaobject definition.
  5. In theWeb pagessection, do the following:
    1. Choose which fields will create the page title and meta description for your search engine listing.Enable in Online Storeis selected by default. If you have a Hydrogen storefront, then deselectEnable in Online Store.
    2. Optional: customize the URL handle.
  6. ClickSave.

After you create the metaobject definition and activate theWeb pagesfeature, you need to addmetaobject 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 on the page selector, find your metobject definition, and then clickCreate template.

Ready to start selling with Shopify?Try it free