Changing Background color for product pages using color gradient

Store Design
, , ,
1

I want to use the same color gradient on my product pages that is my main theme background. No matter what I do, it’s always white. We have 500+ products so a bulk edit option would be the route I want to go.

2

Hi @ErosXpressions

Can i take a look if we can change them? Would you mind to sahre your store URL? Thanks!

3

Sure, it’s ErosXpressions.com

4

Thanks for the info, check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.gradient main#MainContent, .color-background-1.gradient {
  background: rgb(var(--color-background));
  background: linear-gradient(59deg, rgba(64, 12, 193, 1) 13%, rgba(201, 0, 0, 1) 86%);
  background-attachment: fixed;
  position: relative;
}
5

Thank you so much, that worked perfectly!!

6

Welcome. Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!