Banner image not showing up on product pages

Hello. I'm having a weird issue on my store. My banner image is displaying fine on the store page, but disappears on the individual product pages. It shows it as being there in the settings. The template I'm using is Bedford.

Screenshots are attached.

Any help would be amazing as this is super annoying!

Cheers!

Hi,

Can you share link to a product?

Hi, sorry, I've just seen your reply, thank you.

Here's a link to a product.

https://scarlet-wolverine-7a6b.squarespace.com/shop/1m3-seasoned-firewood

Password is: songthrush

Cheers!

On 6/8/2023 at 6:20 PM, misc_adventures said:

I'm having a weird issue on my store. My banner image is displaying fine on the store page, but disappears on the individual product pages. It shows it as being there in the settings. The template I'm using is Bedford.

@misc_adventures This is normal for Bedford family templates 🙂.

The Bedford template family only supports "collection item" banners on blog posts and events, not products within a Store. This differs according to the template and/or version that you use.

On Bedford, banner images can appear on 'collection' pages, like the Product List Page (PLP) that lists all the items in the Store, but not on individual 'collection items', like the Product Detail Pages (PDPs) that show a single product. I hope this helps. 

For more details See Adding banner images in version 7.0, as this describes banner support on all the older version 7.0 templates. Here's an excerpt of the Bedford template information:

Did this help? Please give feedback by clicking an icon below  ⬇️

Paul, thank you, this is good to know. I should have checked this first, I don't think I have the same issue on the other site I manage. 

This leaves me with a problem - is there a work around for this? Can I overwrite it with custom CSS or can I prevent store items from linking to a Product Detail Page?

It looks pretty bad having banners displayed on all my other pages, but just a big black block on the individual product page!

Thanks for your help so far.

Ah! This is brilliant, thanks so much, works a treat.

I tried to to this:

.view-item.collection-type-products.transparent-header #header {
  background-image: url(https://static1.squarespace.com/static/56172c18e4b092405575cb78/t/655bfe5479dfb615bf845e00/1700527701550/517.jpeg?format=2500w);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 72px 20px 72px;
}

for this page: 517living.com/store/directory

but it didn't show up. Am I missing something?

On 11/21/2023 at 7:58 AM, 517living said:

I tried to to this:

 

.view-item.collection-type-products.transparent-header #header {
  background-image: url(https://static1.squarespace.com/static/56172c18e4b092405575cb78/t/655bfe5479dfb615bf845e00/1700527701550/517.jpeg?format=2500w);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 72px 20px 72px;
}

 

for this page: 517living.com/store/directory

but it didn't show up. Am I missing something?

Use this code instead

body.view-item.collection-type-products #header {
  background-image: url(https://static1.squarespace.com/static/56172c18e4b092405575cb78/t/655bfe5479dfb615bf845e00/1700527701550/517.jpeg?format=2500w);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 72px 20px 72px;
}