How can I add the Hero banner on Homepage

[AndreiMorosan]

I want to add this banner for example but I don't know where I need to go on my Shopify CMS, I see that on graphql query on homepage is a collectionContent????

[juanpprieto]

Hi @AndreiMorosan, yes the demo store example uses collection metafields for it's data. You can learn how to create metafield definitions and entries here

Alternatively, you could create a Hero metaobject and use that instead of individual metafields.

[tal9110]

I know this was marked as an answer but didn’t fully help me achieve the result that the question was asking for. The demo store pulls from the Storefront to display those banner images and CTA/description through certain metafields, but it is unclear through the code how to add the specific metafield object that would allow it to display. The article you linked describes how to add metafields in general, but not how to add the specific metafield object for this instance. I’ll attach the code chunk that the demo store uses to pull the banner image

[lordofthecactus]

We have created a collection with snowboards at /admin/collections/

If you scroll down, you can add metafields to that collection:

We query that collection hero in the loader

  const {shop, hero} = await context.storefront.query<{
    hero: CollectionHero;
    shop: HomeSeoData;
  }>(HOMEPAGE_SEO_QUERY, {
    variables: {handle: 'freestyle'},
  });

Then pass get the loader data into the Hero component

 <Hero {...primaryHero} height="full" top loading="eager" />

Does this help @tal9110?

[czpta]

Hey @lordofthecactus ! This is very helpful! Do you mind telling me where I went wrong here?

[karlhass15]

Don't forget to check this box to give read access to selected options when you're setting up your metafields