Add Image to top of individual product page

How can I add an image that spans the entire width of the page, above the white box on the individual product pages.

I want to add a graphic at the top of three individual product pages, here is one of them: https://www.litculture.com/product/lit-premium-hemp-wraps-sweet-georgia-peach/

Hey There,

Please check your server or WP installation. It is under maintenance and we cannot check the page.

Thanks.

I’m not sure what could have caused that. I have seen the “under maintenance” a few times. Never saw that on any of the other sites we have built. Any idea?

You should be able to check the site now.

Hi there,

I managed to see the front end of your website.
Kindly go to Pro > Settings and add the Product post type to the list of the Pro Editor and save:

After that, you will have the pro editor at hand in each product page edit section. Simply use the pro editor to add whatever image you want on that specific product.

Thank you.

Thank you, however it is adding the sections into the description when editing with Pro, below the product images. I want an image at the top of the page, right below the menu.

Hello There,

Thanks for updating in! When using Cornerstone to edit the product page, you can only change the contents of the description and not the whole layout. Cornerstone is only dependent to the post/page/product content area and not the whole layout of the page.

To insert a fullwidth image above the white box, since you are using Pro theme, please duplicate your current header and add another bar container for you to place the fullwidth image. You can then assign this header to all your product and woocommerce pages.

Hope this helps.

So I’ve done that here: https://www.litculture.com/product/lit-premium-hemp-wraps-sweet-georgia-peach/

However, it is now cutting off the product photo and copy next to the product images. I’ve tried adjusting padding/margin, but nothing seems to be working.

Hello There,

The image is displaying. Please set the height of your bar the same height of the image so that it will not be cut off.

Hope this helps.

Thank you. So I got it to the point where it looks good on my 23’ monitor. But on my laptop and phone, it is displaying a huge blank space between the header image and the product details. Please see screenshot: https://drive.google.com/file/d/1KkFJrHqQcX-yXERkFEZnQmfQPM9BZaNj/view?usp=sharing

It doesn’t seem to be responsive, how can I fix that? The gap gets larger, the smaller that the screen gets.

Hello There,

Please set the height of the bar to auto and set the maximum height of the image to 100%.

Hope this helps. Kindly let us know.

Not seeing either of those options. The height of the bar only lets me change between, PIx, %, etc. No auto option. The height of the image I only see PX not a %. Could you please show me some screenshots? Sorry for the hassle, usually I can figure this out pretty quickly, but the header is the only part of the site I didn’t build so I’m not too familiar with the header tool.

Hello There,

Thank for updating in! The height has a default unit of px, em, rem, vh, vw.

You can also insert auto directly.

And for your image, simply use scaling.

If nothing else helps, please provide us access to your site so that we can check your settings.

Thank you.

Great, that fixed the issue I was having. However now, the dropdown on the menu isn’t displaying. It looks like it is loading behind the image?

https://www.litculture.com/product/lit-premium-hemp-wraps-sweet-georgia-peach/

Hello There,

Please check your two bars. The z-index of the first bar must be higher than the second bar so that the dropdowns will not display behind the image.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.