Different Backgrounds for Different Pages & Transparent Product Photos

I’m currently working on a website which consists of a Homepage, Product Page, and an About Page. Ideally I would like to keep the Homepage and Product Page with a white background while the homepage has a photograph or graphic for its background. I would also like png images to show up with transparent background when uploaded to the Product Page. Even though currently I would like the Product Page to have a white background, I would still like the capability to upload transparent png files in case I want to change the Product Page background in the future.

Please Help!

The website url is https://unrealinc.co/pages/about

2 Likes

Hey, @carterunreal

Happy to help! I’m not formally trained in code to provide you with an exact solution to have a different background style for each individual page in your store. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price for you. You can connect with and hire a developer who has the experience to get this done.

If there is anything else I can help you with, please let me know.

@carterunreal

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-product__image {mix-blend-mode: multiply;}

collection page please try t

@KetanKumar thank you for the tip - I followed your instructions but now I do not know how to insert an image as a background for one page, and keep the others white. Can you please provide further instructions?

Ex). The top page image, I would like the background to be white, while the page image underneath it, I would like the background to remain the image of a pool.