Add information to my products preview

[PAUL8]

Hello, 
I want to add this effect: 

I'm esplaining: When you hover over the photos, you can see the remaining and sold sizes.
I use dawn theme, my website is womber.fr and password is PROPAGANDAAA

Thanks,

Cordially

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @PAUL8 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.media--hover-effect:hover .hover-image {
  display: block;
}
.variant-list {
      display: ruby !important;
}

.variant-container {
  display: none !important;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  padding: 10px;
  list-style: none;
  z-index: 20;
}

.card-wrapper:hover .variant-container {
  display: block !important;
}

.variant-item {
  margin-bottom: 5px;
}

.status.in-stock {
  color: black;
}

.status.out-of-stock {
  color: black;
    text-decoration: line-through;
}
</style>

[BSS-TekLabs · Accepted solution]

And find file card-product.liquid and add this code before tag "<div class="card__content">"

[BSS-TekLabs · Accepted solution]

    <div class="variant-container">
    <div class="variant-list">
      {% for variant in card_product.variants %}
      <div class="variant-item{% if variant.inventory_quantity > 0 %} in-stock{% else %} out-of-stock{% endif %}">
        
        {% if variant.inventory_quantity > 0 %}
          <span class="status in-stock">{{ variant.title }}</span>
        {% else %}
          <span class="status out-of-stock">{{ variant.title }}</span>
        {% endif %}
      </div>
      {% endfor %}
    </div>
      </div>

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @PAUL8 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.media--hover-effect:hover .hover-image {
  display: block;
}
.variant-list {
      display: ruby !important;
}

.variant-container {
  display: none !important;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  padding: 10px;
  list-style: none;
  z-index: 20;
}

.card-wrapper:hover .variant-container {
  display: block !important;
}

.variant-item {
  margin-bottom: 5px;
}

.status.in-stock {
  color: black;
}

.status.out-of-stock {
  color: black;
    text-decoration: line-through;
}
</style>

[BSS-TekLabs · Accepted solution]

And find file card-product.liquid and add this code before tag "<div class="card__content">"

[BSS-TekLabs · Accepted solution]

    <div class="variant-container">
    <div class="variant-list">
      {% for variant in card_product.variants %}
      <div class="variant-item{% if variant.inventory_quantity > 0 %} in-stock{% else %} out-of-stock{% endif %}">
        
        {% if variant.inventory_quantity > 0 %}
          <span class="status in-stock">{{ variant.title }}</span>
        {% else %}
          <span class="status out-of-stock">{{ variant.title }}</span>
        {% endif %}
      </div>
      {% endfor %}
    </div>
      </div>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.