How to change the background colour of the first product card on product compare

Store Design
,
1

Hi - I am running the Enterprise theme and would like to highlight / change the background colour of the first product card in the product comparison grid section.

compare-01
compare-011262×617 96.7 KB

compare-01
compare-011262×617 113 KB

Also, I would like the card width to remain the same even if I only have 2 products. So instead of scaling up to fill the page width, the card width should stay the same. Hope this makes sense.

Thanks for our help.

Nick

2

Hi Nick

To highlight or change the background color of the first product card in the comparison grid on the Enterprise theme, you can use this CSS:

.comparison-grid .product-card:first-child {
background-color: #f5f5f5; /* Change to your desired color */
}

Just add it to your theme’s custom CSS section or inside your main stylesheet usually theme.css or base.css depending on the version.

If the structure is slightly different in your version of the Enterprise theme, feel free to share the preview link or theme version, i will happy to guide you further!

Certifiedbrooke, Shopify Expert

3

Hi @Nick_S2

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

5

try this

6

Hi @Nick_S2

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open main.css and add your CSS code at the end
.product-comparison-grid thead th:first-child {
  background: #ebe8e8;
}

image
image1345×583 59 KB

7

Close. But would like the background colour changed for the entire first product column as shown below - including the data in the table below the product card. The remaining product columns are to have a white background. Is this possible?

Cheers

compare-01
compare-011262×617 113 KB

8

For padding, I’d go with – this code can go into “Custom CSS” of this section or elsewhere :slight_smile:

.product-comparison-container table th, 
.product-comparison-container table td {
  padding-inline:10px;
  padding-block: 10px; 
}

.product-comparison-container th:nth-child(2),
.product-comparison-container td:nth-child(2){
  background: rgba(var(--text-color) / .1);
}

@media (max-width: 1023px) { /* some borders for mobile */
  .product-comparison-container th:nth-child(1), 
    .product-comparison-container td:nth-child(1) {
    border-bottom:1px solid rgba(var(--text-color) / .15);
  }
}

Screenshot 2025-09-23 at 2.12.03 PM
Screenshot 2025-09-23 at 2.12.03 PM1226×1000 107 KB
and
Screenshot 2025-09-23 at 2.20.17 PM
Screenshot 2025-09-23 at 2.20.17 PM556×1000 93.7 KB

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
9

@Nick_S2

@tim_1 Try this code.

10

This is looking great! Can we also remove the ‘shop now’ button from the first product?

11

Yeah, makes sense – add this:

.product-comparison-container th:nth-child(2) .btn {
  display: none;
}

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
12

@tim_tairli you’re a legend. Works great. Big thanks

Nick