Gray Background covering product name and price

Topic summary

A user encountered an unwanted thick gray background covering collection images, product names, and prices in the Dawn theme. The issue appeared in the Collection List and Featured Collection sections, but not on the actual Collection/Shop All pages.

Visual Problem:

  • Gray overlay obscuring collection images and names
  • Gray background behind product names and prices in featured collections
  • Desired appearance matched the clean look of the Collection Page (no gray background)

Solution Provided:
Add custom CSS code to the theme’s base.css file:

body .slider-mobile-gutter li {
  background: none!important;
}

Status: ✓ Resolved - The CSS fix successfully removed the gray backgrounds.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

Hi,

I am currently using Dawn Theme and realised there’s a thick gray background covering my collection image, name, and product price. Wonder if anyone can help to show me how to reduce or remove the gray area (refer to screenshot image below).
It’s usually show up at the sections related to collections, and it looks perfectly fine in the collection page.

(Collection List section - huge gray background covering image, name)

(Feature Collection section - huge gray background covering Product Name, Product price)

(Collection Page / Shop All Page - Product name didn’t cover by gray background) → the collection list section & Featured Collection should be like this format

Hi @BryanYF ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

  1. Assets/base.css
  2. Add code below to end of file
body .slider-mobile-gutter li {
	background: none!important;
}

it work! thank you so much :slightly_smiling_face: