Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I'm working in the Streamline theme and needed to rebuild the product grid item so that on hover it displays the last product image instead of going through the slideshow. I got the whole hover part working but when you click on the image, the image still displays while the next page is loading if you keep your mouse over the image. Here is the product-grid-item code that is updated. I just added classes, "reveal" and "hidden".
<a
href="{{ product.url | within: collection }}"
class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}{% if enable_quick_shop %} quick-product__btn js-screen-open-product-{{ product.id }} js-no-transition{% endif %}"
data-product-id="{{ product.id }}"
data-url="{{ product.url | within: collection }}">
<div class="product-image--wrapper"
data-id="{{ product.id }}">
<div class="reveal grid-product__hover-details">
{%- if fixed_aspect_ratio -%}
<div
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
data-bgset="{% render 'bgset', image: preview_image %}"
data-sizes="auto">
</div>
{%- else -%}
{%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
<div class="image-wrap"
style="height: 0; padding-bottom: {{ slider_image_padding }};"
>
<img class="grid-product__image lazyload"
data-src="{{ img_url }}"
data-widths="[750, 900, 1080]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ preview_image.alt | escape }}">
<noscript>
<img class="grid-product__image lazyloaded"
src="{{ preview_image | img_url: '400x' }}"
alt="{{ preview_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}
<div class="hidden">
{%- if fixed_aspect_ratio -%}
<div
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
data-bgset="{% render 'bgset', image: last_image %}"
data-sizes="auto">
</div>
{%- else -%}
{%- assign slider_image_padding = 100 | divided_by: last_image.aspect_ratio | append: '%' -%}
<div class="image-wrap"
style="height: 0; padding-bottom: {{ slider_image_padding }};"
>
<img class="grid-product__image lazyload"
data-src="{{ img_last_url }}"
data-widths="[750, 900, 1080]"
data-aspectratio="{{ last_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ last_image.alt | escape }}">
<noscript>
<img class="grid-product__image lazyloaded"
src="{{ last_image | img_last_url: '400x' }}"
alt="{{ last_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}
</div>
</div>
</div>
Here is the CSS
.reveal .hidden .lazyloaded {
display: block !important;
visibility: visible !important;
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal {
position: relative;
opacity: 1;
}
.reveal:hover .lazyloaded {
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal:hover .hidden .lazyloaded {
z-index: 100000;
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.grid-product__tag {
z-index: 200000;
}
I tried messing around in JS to remove this on click but can't figure it out
<script>
var hideEl = document.getElementsByClassName("grid__image-ratio:before");
var reveal = document.getElementsByClassName("grid-product__link");
function revealHide() {
for (i = 0; i < hideEl.length; i++) {
hideEl[i].style.content = "none";
}
}
for (i = 0; i < reveal.length; i++) {
reveal[i].addEventListener("click", revealHide);
}
</script>
Here is a preview link.
Thanks!
Solved! Go to the solution
This is an accepted solution.
I don't know the reason you set z-index so height, pls change it to 1. It should not be higher than the loading mask layer
.reveal:hover .hidden .lazyloaded {
z-index: 1;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
This is an accepted solution.
I don't know the reason you set z-index so height, pls change it to 1. It should not be higher than the loading mask layer
.reveal:hover .hidden .lazyloaded {
z-index: 1;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
Can't believe I didn't think about that. Works perfectly, thanks!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025