Help understanding the homepage "heroBanner"

[bigdogvision-jeff]

I see the heroBanner on the homepage, which is actually getting retrieved from a placeholder if the GraphQL request is null but i'm not sure I understand where to set these metafield values in shopify
https://github.com/Shopify/hydrogen/blob/3116d19291b6e183bea3c586ce57fe12f539270d/templates/demo-store/src/lib/placeholders.ts#L3

https://github.com/Shopify/hydrogen/blob/3116d19291b6e183bea3c586ce57fe12f539270d/templates/demo-store/src/routes/index.server.tsx#L114

    heroBanners: collections(
      first: 3
      query: "collection_type:custom"
      sortKey: UPDATED_AT
    ) {
      nodes {
        id
        handle
        title
        descriptionHtml
        heading: metafield(namespace: "hero", key: "title") {
          value
        }
        byline: metafield(namespace: "hero", key: "byline") {
          value
        }
        cta: metafield(namespace: "hero", key: "cta") {
          value
        }
        spread: metafield(namespace: "hero", key: "spread") {
          reference {
            ...Media
          }
        }
        spreadSecondary: metafield(namespace: "hero", key: "spread_secondary") {
          reference {
            ...Media
          }
        }
      }
    }

I can't find any good documentation on this. Would someone be able to point me in the right direction? Metafields in shopify are rather elusive. Appreciate the help!

[duffpop]

I haven't tried it, but from the wording I'd expect you need to add the metafields at the below URL. hero.title, hero.byline etc.

https://SUBDOMAIN.myshopify.com/admin/metafields/collection/create

[scottdixon]

Hey @bigdogvision-jeff

You can create metafields in Admin > Settings > Metafields.

In this case, you'd add a new definition to Collections:

From there they appear under each collection:

[hemavidal]

That solution works for me!

[lordofthecactus]

👋 @bigdogvision-jeff, we definitely need to improve metafields documentation in hydrogen.

You are correct, that we use a placeholder if the metafields are null. We currently set the custom metafields in the shopify store, which then we fetch through the storefront API. Here you can find extra documentation complementing @scottdixon's answer:
https://help.shopify.com/en/manual/metafields/metafield-definitions/creating-custom-metafield-definitions

Let me know if this helps, or join our discord channel and we can chat about this: https://discord.com/invite/shopifydevs

[bethkellyshopify]

That totally helped me. FYI to anyone else looking for help here - the 5 metafields are:

• hero.title - Single line text
• hero.byline - Single line text
• hero.cta - Single line text
• hero.spread - File (default types is fine)
• hero.spread_seconary - File (default types is fine)

And I ended up needing to then configure it on 2 of my collections to get it to display on the demo store using my store as a back end. And there was a little lag between setting it in the admin and being able successfully refresh the store in my local. After that, worked like a charm.

[benjaminsehl]

We should add inline documentation to the code that provides an explanation here, and a mini tutorial on how to do it.

@scottdixon @mcvinci @grahamscott — something we had talked about before but we didn't end up getting to. Worth revisiting!

[grahamscott]

one for @gfscott

[t2nosuke]

How much time did it take to become effective?
It's been about 10 minutes and nothing is showing up.

---

Resolved.

A meta-field is generated in the product collection, so I should have set heroBanners there.
Thanks.

[bigdogvision-jeff]

Awesome! Thanks @lordofthecactus and @bethkellyshopify

Appreciate the help!!

[ChrisKG32]

A note for anybody finding this thread and still struggling. In the Shopify Admin Metafields interface you check

Expose this metafield to Storefront API requests.

This includes Hydrogen, however, many of the popular metafield management apps, such as "Metafields Guru" (which I highly recommend) also have the same checkbox, but currently do not seem to expose them to the Hydrogen sales channel. So make sure you have all of your metafield definitions defined in the official Shopify admin page.

[benjaminsehl]

Oh is that right? That seems odd! Storefront API should work across all clients (whether in Hydrogen or another framework). It would be worth filing a bug report with Metafields Guru.

Thanks for surfacing this!

[theMoeLafi]

how is it possible to add metafields to the homepage itself ? in the Shopify panel settings i see options for adding and exposing metafields to almost any page (products, blogs, blog posts, variants, ...etc) but not the homepage ?

[duffpop]

What type of data do you want to display?

[Moelafi]

Let's say I want to add a meta field for a homepage hero image ? Or a meta field for a product ID to feature on the homepage ? (Am using Hydrogen)

[duffpop]

I would personally use the Page Metafields, as I view the homepage as a Page: https://SUBDOMAIN.myshopify.com/admin/metafields/page/create

Or use the Brand "Metafields": https://SUBDOMAIN.myshopify.com/admin/settings/branding

There's no specific homepage collection AFAIK, but you can perhaps name the Page Metafield's Namespace "homepage".

[Moelafi]

Brilliant, I was actually thinking of this as a work around but wanted to make sure its not too "Hacky" :D thanks for the help

[duffpop]

You're very welcome 😄