Background color change and related products for "You May Also Like" section

Store Design
, ,

Topic summary

A Dawn theme user encountered two issues on their product page:

Issue 1 - Black Background (Resolved):

  • The “You May Also Like” section displayed a black background instead of matching the page’s background color, despite using PNG images with transparent backgrounds.
  • Solution: Add CSS code to component-card.css to make the card background transparent:
.card--card, .card--standard .card__inner {
  background-color: transparent !important;
}

Issue 2 - Product Recommendations:

  • The recommendations section shows unrelated products (e.g., yogurt appearing on a cheese product page) rather than actual related items.
  • This issue remains unaddressed in the thread.

The background color problem was successfully resolved with the CSS fix provided by StudioEnchant.

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

I’m using the dawn theme

  1. The section for “you may also like” on the product page is black and I don’t know how to change it to match the section back ground. The images are pngs with transparent background.

  2. How do I show actual related products rather than something random?
    For example, on this page it shows a yogurt instead of a related cheese type.

https://bleswold.myshopify.com/products/gouda-cheese-a2-medium

pw cheese

1 Like
2

Hi @kirkcanada

Please follow the instructions below to make the product image background transparent.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-recommendations .card__inner.color-background-2.ratio {
    background-color: transparent;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hey @kirkcanada ,

Please provide store’s password

1 Like
4

pw cheese

5

To make the black background transparent add the following code to the bottom of your component-card.css file:

.card--card, .card--standard .card__inner {
    background-color: transparent !important;
}
6

That seems to have done the job. Thanks so much for your help.

7

Always happy to help :wink: