Jump to content

Banner image not showing up on product pages

Go to solution Solved by paul2009,

Recommended Posts

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!

 

Screenshot 2023-06-08 at 18.15.28.png

Screenshot 2023-06-08 at 18.15.36.png

Screenshot 2023-06-08 at 18.15.54.png

Link to comment
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:

image.thumb.png.ac922403c8a405652bc74390728c7e4e.png

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

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.

Link to comment
  • Solution
29 minutes ago, misc_adventures said:

I don't think I have the same issue on the other site I manage.

This is quite possible. Every Squarespace 7.0 template-family is different. For example, the Five template supports this feature.

 

28 minutes ago, misc_adventures said:

Is there a workaround for this? Can I overwrite it with custom CSS or can I prevent store items from linking to a Product Detail Page?

Yes, you could try to recreate this effect, either by using some custom CSS or, by using JavaScript to do what Squarespace does on other pages by creating an entirely separate "banner-thumbnail-wrapper" div element between the header and the main page that contains the image.

Here's an example of some custom CSS to get you started, although you may want to adjust margins and padding to meet your needs:

.view-item.collection-type-products.transparent-header #header {
  background-image: url(https://images.squarespace-cdn.com/content/v1/644148edc2011865159d7123/1686243561278-WNVMSG9HSO9USMU11FI2/Firewood_Coop_1.jpg?format=2500w);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 72px 20px 72px;
}

image.thumb.png.9a9a7148721067ddc0e3c8f16000d044.png

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 5 months later...

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?

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.