Ecommerce product page color mistakes that quietly kill conversions

1. The product image always wins

Every color decision on a product page should be made in service of the product image. If the background, the badge, or the button is competing with the product for attention, you're losing.

• Use white or very light gray (#F9FAFB) as the gallery background.
• Avoid colored section fills directly behind product images.
• Keep badges and labels small and positioned away from the product.

2. Variant states need to be obvious

Color swatches, size selectors, and stock indicators are where most product page color systems fall apart. Selected, available, and out-of-stock states all need to be visually distinct.

• Selected variant: strong border or filled background in your accent color.
• Available but unselected: neutral border, full opacity.
• Out of stock: reduced opacity + strikethrough or 'sold out' label.
• Never use the same visual treatment for selected and out-of-stock.

3. The add-to-cart button hierarchy

The add-to-cart button should be the most visually prominent interactive element on the page. Not the sale badge. Not the wishlist button. The cart button.

• Use your strongest accent color for add-to-cart only.
• Make wishlist and share buttons outlined or icon-only.
• If you have a 'Buy Now' button, it can share the same color — but keep it secondary in size.

Common mistakes

• Using a colored background behind product images.
• Making sale badges as visually loud as the add-to-cart button.
• Using the same visual style for selected and out-of-stock variants.

Before you ship

• Check product images on a white or near-white background.
• Define distinct visual states for selected, available, and out-of-stock variants.
• Make add-to-cart the strongest accent element on the page.
• Test the page with multiple product types and image styles.