Shopping Selectors

Ready-made class names for shopping sites. Use them in your style to change how products look when they’ve been viewed, searched before, or purchased.

Viewed

Products the shopper has already opened.

CSS
.stylish__viewed .stylish__product-card__container {
  opacity: 0.85;
  border-left: 3px solid #F97E4A;
}
 
.stylish__viewed .stylish__badge {
  --text-content: "Viewed";
  color: #F97E4A;
  background: rgba(249, 126, 74, 0.15);
}

Searched before

Products that match a previous on-site search.

CSS
.stylish__searched-before .stylish__product-card__container {
  border: 1px solid rgba(126, 93, 255, 0.3);
  background: rgba(126, 93, 255, 0.08);
  border-radius: 8px;
}
 
.stylish__searched-before .stylish__badge {
  --text-content: "Searched before";
}

Purchased

Products the shopper has already bought.

CSS
.stylish__purchased .stylish__product-card__container {
  opacity: 0.7;
  filter: grayscale(30%);
}
 
.stylish__purchased .stylish__badge {
  --text-content: "Purchased";
  color: #F4F3EF;
  background: rgba(22, 22, 22, 0.75);
}
 
.stylish__purchased .stylish__product-card__button {
  --text-content: "Buy again";
}

Changing labels with --text-content

Want different button or badge text? Add --text-content in your CSS. Stylish picks it up and updates the real label on the page.

  • Buttons.stylish__product-card__button
  • Stylish badges.stylish__badge

Two different badges: Use .stylish__badge for Stylish’s own badge (supports --text-content). .stylish__product-card__badge is the store’s badge (like “Best Seller”) — Stylish doesn’t edit or hide it, and you can style it, but you can’t change its text with --text-content.

CSS
.stylish__purchased .stylish__product-card__button {
  --text-content: "Buy again";
}
 
.stylish__purchased .stylish__badge {
  --text-content: "Purchased";
}

Don’t use the CSS content property for labels. Use --text-content instead.