Ride Theme - Product Background Without Changing Theme Background

Store Design

Topic summary

Goal: Make only the single product page background (product information section and product image area) white in the Shopify Ride theme, without changing the overall theme background.

What was tried:

  • CSS targeting a specific product template section ID was suggested to add in the product template file to set background: white.
  • Another suggestion was to add a .focus-none CSS rule in base.css to force a white background.

Results/feedback:

  • The merchant asked if the first suggestion meant editing product.json; attempts to save there failed, and they also want the actual image area to appear on white (images are currently transparent).
  • Applying .focus-none changed the entire theme background to white, which is not desired; the change needs to be limited to the product page only.

Notes:

  • A preview link and a product page screenshot were provided; the image attachment illustrates the current transparent look but isn’t necessary to reproduce the issue.

Status: Unresolved. The merchant needs a product-page-scoped CSS solution that affects only the product template (including the image’s container) and guidance on where to place it without affecting the whole theme.

Summarized with AI on February 11. AI used: gpt-5.
1

Hi everyone!

Thanks in advance for your help, this community board is super helpful when designing.

I am trying to change the background color on the single product page, without changing my overall theme background.

Right now, all of my products are transparent. I would like the entire product information section background to be white. Can someone help me, please?

I’ve tried using codes that I found in previous discussions, but none of them work.

Here’s the link to my site:

https://382c8sf3ce1uerqi-59114717229.shopifypreview.com

I’ve also attached a photo of the product page to show how it currently looks.

Thank you!

Screen Shot 2022-08-16 at 9.13.08 AM.png
Screen Shot 2022-08-16 at 9.13.08 AM.png1396×666 76.8 KB

2

@clawscnb123 go into your product template file and add this code at the bottom

section#shopify-section-template--15162019479597__main{
background:white;
}

imatikshaikh_0-1660658418359.png
imatikshaikh_0-1660658418359.png1860×875 119 KB

Let me know if you meant something else.

If this works for you, like and mark this as solved. :slightly_smiling_face:

3

Hi @clawscnb123 .

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.
Yo can go to Online Store => Themes => Actions => Edit code and add this code on file base.css

.focus-none{
background-color: white !important;
}

Hope this helps.

Best regards,

PageFly

4

Are you saying add it to template Product.json ?

I tried that, but it would not save.

Also, I would prefer that the actual image be on a white background as well. I currently have a transparent image uploaded.

5

@PageFly-Victor

I did this, but it changed my entire theme background to white, that’s not what I wanted.

I just want the product page background white.

Any idea on how to do that?

Thanks!