Liquid, JavaScript, themes, sales channels
Hello,
I want a hover effect on my products, so if someone hover over the product, I want the second picture.
I saw a video on YT: https://www.youtube.com/watch?v=9uxSrOxxZpY&feature=youtu.be
I added the code in 'theme.scss.liquid' and in 'product-card.liquid' (I don't have 'product-card-grid.liquid' in my theme?)
If I go then to my website I get an error: look picture below.
Here can you find the codes that I added:
1. Theme.scss.liquid
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
2. Product-card.liquid
{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>
anyone????
did u fine solution 😞
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024