Customize CSS for sizes on hover - Prestige Theme

Shopify Discussion
,
1

Hi,

I wanted to add the sizes on hover on my product card.

After some research, I found a way to edit the code to make it look like this :

(I used gpt to help me find a style i like a bit and modify the css)

Vic1208_0-1745498154012.png
Vic1208_0-1745498154012.png400×325 210 KB

It works only when hovering so its perfect… but I would like to make it look different.

I would like to make it look like this : (even if its without the product name, i would like to make a background to it and make sure the “+” is part of it because its for quick buy)

Vic1208_1-1745498153284.png
Vic1208_1-1745498153284.png261×400 75.7 KB

Here is the css for now : (with french notes but nevermind)

/* TAILLES DISPONIBLES SUR LE SURVOL DU PRODUIT /
.product-card__sizes {
position: absolute;
bottom: 10px; / Position légèrement au-dessus du bas de l’image /
left: 50%; / Centré horizontalement /
transform: translateX(-50%); / Ajustement pour centrer /
max-width: calc(100% - 100px); / Zone élargie /
display: flex;
flex-wrap: nowrap; / Force les tailles à rester sur une seule ligne /
justify-content: center;
gap: 8px; / Espacement entre les tailles /
font-family: ‘Roboto’, sans-serif; / Police Roboto /
font-size: 0.55rem; / Taille réduite de 25% pour ordinateur /
text-align: center;
padding: 0; / Pas de padding global /
background: transparent; / Pas de fond pour le conteneur global /
border-radius: 0; / Pas de coins arrondis pour le conteneur global /
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10; / Assure que ça reste au-dessus de l’image /
pointer-events: none; / Ne bloque pas les clics en dehors */
}

/* Afficher les tailles au survol /
.product-card__figure:hover .product-card__sizes {
opacity: 1;
visibility: visible;
pointer-events: auto; / Active les clics lorsque les tailles sont visibles */
}

/* Styles pour chaque taille individuelle /
.product-card__size {
padding: 3px 8px; / Padding légèrement réduit /
background: rgba(255, 255, 255, 0.75); / Fond blanc légèrement transparent /
color: black; / Texte noir pour contraster avec le fond blanc /
cursor: default; / Pas de curseur cliquable /
border: 1px solid rgba(255, 255, 255, 1); / Bordure noire adoucie /
border-radius: 4px; / Coins arrondis pour chaque taille /
margin: 0; / Pas de marge supplémentaire /
box-shadow: none; / Suppression des ombres autour des tailles /
font-size: 0.65rem; / Taille réduite de 25% /
width: auto; / Permet aux tailles de s’adapter à leur contenu */
}

/* Taille indisponible (barrée) /
.product-card__size.unavailable {
text-decoration: line-through;
color: #777; / Couleur grisée pour les tailles non disponibles */
}

/* Enlever tout style par défaut de border, ombre, ou autres propriétés sur .product-card__size */
.product-card__size * {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

/* Ajuster pour les appareils mobiles /
@media (max-width: 767px) {
.product-card__sizes {
font-size: 0.45rem; / Taille augmentée pour mobile /
max-width: calc(100% - 40px); / Zone légèrement plus petite pour mobile /
flex-wrap: wrap; / Permet aux tailles de revenir à la ligne si nécessaire sur mobile */
}

.product-card__size {
padding: 1px 3px; /* Pas de changement pour mobile /
font-size: 0.45rem; / Police augmentée pour mobile /
background: rgba(255, 255, 255, 0.8); / Fond blanc légèrement transparent /
border: 1px solid rgba(0, 0, 0, 0.5); / Bordure noire adoucie pour mobile /
color: black; / Texte noir pour mobile */
}
}

Thanks a lot ! I wish someone can help me

Vic

2

If you can share the store URL and Password then it would be easy for me to gave you solution.

3

Hi,

You need access to the back office ?

or just the link of the website ?

www.ekyog.com

The website is public. If you need anything I’ll reply to you asap.

Thanks a lot

4

I need store access. Please share collab code in the p/m.

5

Hi,

Hope this will help

  • Wrap sizes + “+” button in a box
  • Update CSS
    CSS example
/* WRAPPER for sizes + Quick Buy */
.product-card__sizes {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9); /* Soft white background */
  border-radius: 20px; /* Smooth rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

/* Show on hover */
.product-card__figure:hover .product-card__sizes {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Each size */
.product-card__size {
  background: white;
  color: black;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 0.65rem;
  font-family: 'Roboto', sans-serif;
  cursor: default;
}

/* Unavailable sizes */
.product-card__size.unavailable {
  text-decoration: line-through;
  color: #999;
}

/* Add "+" Quick Buy button */
.product-card__quickbuy {
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Remove product name */
.product-card__title {
  display: none;
}
  • Add the “+” button in your Liquid file
  • Do Mobile Responsiveness