How to apply custom background only to product thumbnails (Ride Theme)

Technical Q&A
,
1

Hi everyone,

I need some help customizing how product thumbnails are displayed in the Ride theme.

What I would like to achieve is:

  1. For all product thumbnails across the entire store (collections, featured collection, homepage sections, search results, etc.), I want the first product image to appear with a custom background image behind it.

  2. When a customer opens the product page, all product images should remain normal, with their original transparent backgrounds.

This is the background image I want to use:

4E71C21E-2B02-4935-AF2C-9C9A5BD4955F - Copy
4E71C21E-2B02-4935-AF2C-9C9A5BD4955F - Copy1024Ă—1024 123 KB

If anyone has experience with this or knows the best approach, I would really appreciate your help.

Thank you in advance!

2

Hi @KBOTRBNT

Since your product images are transparent, you can use CSS to add the brick background texture behind them in the thumbnail grids, while keeping the main product page clean.

Go to Online Store > Themes > Edit code. Open Assets/base.css and paste this code at the very bottom:

/* Add background to product card thumbnails */
.card__media .media {
  background-image: url('PASTE_YOUR_IMAGE_URL_HERE');
  background-size: cover;
  background-position: center;
}

/* Ensure main product page images remain transparent */
.product__media-list .media {
  background-image: none !important;
  background-color: transparent !important;
}

Just replace your URL there and you should be good to go!

Hope this helps!

4

@KBOTRBNT using css we can add the background images for the thumbnails, can you please share your website link?

5

Hi there! You’re on the right track by wanting to use a background image behind your transparent product photos. The Ride theme doesn’t support this out of the box, but you can add it with a bit of CSS.

  1. Upload your brick texture under Settings → Files and copy the URL.

  2. Open Online Store → Themes → Edit code and locate Assets/base.css (or theme.css if you’ve renamed it). At the very end of the file add:

/* Add a background to product card thumbnails */  
.card__media .media {  
  background-image: url('YOUR_IMAGE_URL');  
  background-size: cover;  
  background-position: center;  
  background-repeat: no-repeat;  
}  

/* Keep images on the product page transparent */  
.product__media-list .media {  
  background-image: none !important;  
  background-color: transparent !important;  
}

This will apply the brick pattern to all the thumbnail cards across collections, featured collections and search results, but leave the images on the product page untouched.

If you only want the very first image of each product to get the background, you could add a custom class in the product-card snippet that’s only applied to the first media item and target that in your CSS, but for most stores the above code is sufficient.

Once you save and refresh, you should see the thumbnails displaying over your brick background while the full product page still shows the original transparent images. Hope that helps!

6

Hi, thank you so much, the code works and the background shows up correctly on the product thumbnails.
The only issue is that it also added the background to my collection list (the category cards), and I don’t want the brick texture there.

image
image1831Ă—731 163 KB

Is there a way to apply the background only to product cards?

7

Hi @KBOTRBNT

Ah, yeah, sorry for the no reply. Things have been crazy here.

To do so, you need to add .card--product to your code. This forces the background to apply only to products, ignoring the category list.

Replace your first block of code with this:

/* Add background ONLY to Product Cards (ignores Collections) */
.card--product .card__media .media {
  background-image: url('PASTE_YOUR_IMAGE_URL_HERE');
  background-size: cover;
  background-position: center;
}

That should do the trick!