Display size on product card when hover (collection page) - Prestige Theme

[Vic1208]

Hi,

I would like to add the available sizes when hover on the product card (when on the collection page).

Here is what I have for now :

When hovering, a “+” appear to quick buy, if I click it a window appears with every details and the possibility to add to cart. I like this feature, its great, but I would like to display more information when simply hovering (more than just the “+”)

Here is a quick edit I did to show what I would like (even if it’s not the right font and everything…) It’s just a quick mock up to show the idea :

Here, when hovering, it shows the product name and the available size with still the “+” to display the quick buy menu.

Do you think its possible ? I can’t code myself but I easily understand what to do and why If you tell me which code i need to paste where and which thing I have to modify based on my code.

I can share any information.

Thanks a lot,

Victor

[Small_Task_Help]

Hi,

Hope this will help

-Locate Product Card File
-Find Where Hover Content Is
Some thing like product-card__overlay or product-card__content

• Add Sizes on Hover

Code example

{% if product.variants.size > 1 %}
  
    {% for variant in product.variants %}
      {% if variant.available %}
        {{ variant.option1 }}
      {% endif %}
    {% endfor %}
  

{% endif %}

• Use CSS for style

[Vic1208]

Hello,

Thanks for your reply,

Unfortunately, I can’t find the “hover” part on the product card…

I do believe its in the product-card.liquid but there isn’t any part for the hover thing.

If I paste your code in the product-card.liquid directly, obviously the sizes display constantly and below the product card :

Anyway,

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)

It works only when hovering so its perfect… but I would like to make it look like my exemple. Do you think you can help me ?

Here is the css for now : (with french notes but you don’t care)

/* 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 find the way to make it look like this :

Vic