How Shopify Shop Metafield Objects can be Used to Show Information about your Brick and Mortar Stores

Shop-level metaobjects in Shopify are like reusable, customizable content blocks you create once and use anywhere across your store. Think size charts, brand or designer bios, FAQs, ingredient or care details, store hours, promo banners, or “about the maker” highlights—all managed in one place, then attached to products, collections, and pages as needed.

Because they live at the shop level (not tied to any single product), you can update them once and see changes everywhere, keeping your store consistent and saving time. You’ll find and manage them in your Shopify admin under Settings > Metafields & Metaobjects, so you don’t need a custom app or heavy coding—just set up the content you want, and plug it into your theme wherever it makes sense.

In this article we're going to talk about creating a Shop level Shopify Metaobject to use to display information about the physical locations for XYZ Corporation.

Prerequisites:

• Access to a Shopify Store or Shopify Development Store

• Some Working Knowledge of the Shopify Admin

• Some Working Knowledge of Shopify's Liquid Templating Engine

Navigate to the Settings of your Shopify store and select "Metafields and Metaobjects" as shown above. If you have not added and Shop Metaobjects to your Shopify store, then you should see something like this at the bottom of the page. That is excellent! Today you will be learning how to use them!

Select "Add Definition" and you should be taken to an "Add Metaobject Definition" form. You can read more about what all these options are here.

Since we're trying to create location information, we're going to create some fields that relate to our physical store locations that might be relevant both to our customers as well as our internal usage.

• Location Name *Required

  • How do your customers refer to this location? I.e. "Townsville Location"

• Location Identifier *Required

  • What is your internal identifier for this location?

  • Single Line Text

• Location Phone Number

  • Single Line Text

• Location Address Line 1

  • Single Line Text

• Location Address Line 2

  • Single Line Text

• Location Hours Monday - Saturday

  • Single Line Text

• Location Hours Sunday

  • Single Line Text

Let's create these definitions and make sure that the Active-draft status is "Enabled" to make it active. We also want to make sure that the Storefronts API Access is enabled. This will ensure we can use this data in our liquid templates.

Make sure your page looks something like the image below, and click "Save."

Super! Now lets get these metaobjects populated!

After saving you'll likely see something like this image at the top of your screen.

Click "Add Entry." And we should see the following form with empty fields. Feel free to create a few of your own matching what I did! I created two for the purpose of this article:

Now if we go to our Content > Metaobjects menu, we can see the Metaobject we created, and how many entries it has.

Clicking on the metaobject "Location Information" will take us to a listing of all the entries we have created so far:

Now let us put these metaobjects to use!

Navigate to Online Store > Pages in the left navigation menu and then click "Add Page" on the top right to add a new page.

Now we want to reference this metaobject somewhere else in our store.

Since we're going to create a page that references this metaobject information, we need to set up a metafield on pages. Navigate back to Settings > Metafields and Metaobjects and select Pages

From there click on "Add Definition"

And fill out the form as follows:

Make sure Storefront API access is enabled and click "Save."

1. Push your extension to Shopify: npm run deploy

╭─ info ───────── Using .env.development for default values: • Org: Test Org • App: my-demo-extension-app • Include config: Yes You can pass `--reset` to your command to reset your app configuration. ? Release a new version of my-demo-extension-app? ✔ Yes, release this new version Releasing a new app version as part of my-demo-extension-app banner-notice │ Bundling UI extension banner-notice... banner-notice │ banner-notice successfully built ╭─ success ───────── New version released to users. my-demo-extension-app-3 [1] [1] https://partners.shopify.com/XXXXXX/apps/XXXXXXXXXX/versions/XXXXXXXX 2. Follow the prompts to select your development store and install the app.

3. Go to your checkout settings and click "Customize"

4. Go to the app blocks in the left navigation and select your banner-notice app block

5. Select where you would like the block to appear

6. You should now see a preview of the block in the checkout section

Last is to test your extension on your store! Create a test order and proceed to checkout. You should be seeing your banner during the step you selected!

Security Considerations

Checkout UI Extensions are designed with security in mind:

• They run in an isolated sandbox

• No access to sensitive payment information

• Limited to specific UI components and APIs

  • You will need to enable scopes in your extension toml files for whatever features you desire to use.

• Restricted access to global web APIs

• Protected customer data requires additional security review

Important Notes

• Checkout UI Extensions require a Shopify Plus plan or an enabled development store

• The extension will only work in the checkout process

• Changes to the extension require pushing updates or running using npm run dev to see them in the checkout

• UI components inherit merchant brand settings and cannot be overridden with custom CSS

Troubleshooting

If you encounter issues:

1. Ensure you're using the correct Shopify CLI version

2. Verify your app is properly installed on the store

3. Check the browser console for any build or deploy errors

4. Make sure you're testing in a Shopify extension development store or a Shopify Plus store

5. Verify your extension target is correctly specified in the configuration

Additional Resources

• Shopify Checkout UI Extensions Documentation

• Shopify CLI Documentation

• Shopify Partner Dashboard

• Checkout UI Components Reference

• Extension APIs Reference