Problem with Heros after connecting custom storefront demo to shopify shop

Hi,

I am new to hydrogen development (so this might be a stupid question for some of you) and currently trying to build my own custom storefront for an excisting shopify online shop.

I already connected the demo-store template to my shopify store. But since then the only thing I which is displayed for my maincontent is a featured Products section and a featured Collections section. All the hero sections are not displayed.

I think this has something to do with the placeholders.js because as soon as I create a collection matching the handle of e.g. ‘freestyle’ it starts displaying the section. The problem is that there is still no image displayed even if I change the url to the one of my files uploaded in the content section of my admin dashboard.

Does anyone know what i did wrong or what to do to display either the placeholder images or any custom Image which I slected / uploaded to files in the admin dashboard?

Thanks.

Hello Mark, I’m guessing that you could get a developer to have a look at it for you just to know if there are some real background issues to the problem.

1 Like

Thank you for your response. I have already fixed the Problem.

I just had to set-up the metafields and then set the handles in the index.jsx to the resource connected to the metafield (in my case a collection name). Then it displays the hero.

Be sure to select the checkbox to grant access to your storefront otherwise it will not be displayed.

@mark-weitz @Rayshuggs I dont understand how to fix this. I did just setup a demo store with:

1. Installed the demostore with npm create @shopify/hydrogen@latest 
2. Pushed the code to my github
3. Setup the a hydrogen sales channel
   3.1 Selected the repo from 2
   3.2 Shopify added a github action file
4. waited for the job to complete
5. visited the url

But now every 1/3 of the time I refresh the page the hero images from the demo store flashes up (see attached video).

Ive tried to add to set metafields on the product (see img)

Where is the image even coming from? :open_mouth:

When you installed the demo store it probably cached the image path from the placeholder.js file before you changed the credentials in the .env file. You can delete the content from the placeholder.js file and replace with your store placeholder info but as a fallback when there is no metafield set up.

The metafields are set up on the collection associated with the hero not a product