Image overlay color

Store Design
, ,
1

I want to show gray shade in the collection grid. A reference image is given below.

kjhdfsadf.png
kjhdfsadf.png1387×457 476 KB

Here is my website preview link: https://qvck2fcs41fs5ywd-62302978229.shopifypreview.com

2

Hi @Al_Noman ,

This is Amelia from PageFly - a Landing Page Builder App,

You can try to use this custom CSS in your theme again.
I checked your preview link is expired.

Step 1: Access the Theme Editor1. Go to your Shopify admin panel.

  1. Navigate to Online Store > Themes.

  2. Click on Actions > Edit code next to your theme.

Step 2: Add Custom CSS1. In the left sidebar, find and click on the Assets folder.

  1. Open the theme.css or base.css file (depending on your theme).

Step 3: Add the CSS Code

Add the following CSS code at the bottom of the file:

/* Add gray shade to collection grid */
.collection-grid .grid-item {
  background-color: #f0f0f0; /* Light gray shade */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.collection-grid .grid-item:hover {
  background-color: #e0e0e0; /* Slightly darker gray on hover */
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

3

It doesn’t work.