Goal: change product tile backgrounds from black to dark grey to clearly group each product’s image with its title and button.
Context: A Shopify preview link was shared. The requester provided before/after screenshots illustrating the current black background versus the desired dark grey—these images are central to understanding the visual change.
Proposed solution: Add custom CSS in the theme stylesheet (theme.scss) to set the product tile wrapper’s background to a dark grey (#292929) and add spacing. Implementation steps:
Rationale: A darker tile background helps customers associate the correct text and button with each product image, avoiding the appearance that elements are separate.
Status: A concrete CSS fix has been provided. The original poster has not confirmed whether it resolves the issue, so the thread appears open without a confirmed resolution.
Hey all, I would like to change my product ‘tiles’ background color, so that it is clear for the costumer which text and button belongs to which image. Currently it’s just black, like the background color, i would like to want it to be like dark grey.
See the page here:
Hey, I would want the color of the ‘tiles’ to be dark grey. So that the consumer knows which title and button belong to which product, at the moment it looks like they’re elements that are separate from each other. Take a look at the following examples.
Current situation:
What I would want it to look like (only look at the dark grey background color):
Hey @AvadaCommerce , I would want the color of the ‘tiles’ to be dark grey. So that the consumer knows which title and button belong to which product, at the moment it looks like they’re elements that are separate from each other. Take a look at the following examples.
Current situation:
What I would want it to look like (only look at the dark grey background color):
Hi @JOR_M ,
You can follow the instruction below:
.grid-product__wrapper {
background: #292929;
padding-bottom: 20px;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.