Hello Shopify community,
i need some help :). I have add the codes from the helping page (to show an alternate image):
https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images
I´ve worked on the codes in the product-grid-item.liquid and now my codes looks like this
<div class="reveal">
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
<img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
</div>
I have also put the css code into the theme.scss.liquid but it doesnt work at all.
No hover effect if i show my cursor to the image.
Can you help me please and tell me where the mistake is.
I thank you in advance.
Cheers!
Here you go:
{% if product.featured_image.src == blank %}
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
{% else %}
<div class="reveal">
{% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
src="{{ product.featured_image | img_url: 'grande' }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
<img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</noscript>
Enjoy!
Hi guys,
This is probably a dumb question but do I add SD's code to the product-grid-item.liquid?
Would it be to replace Shopify's code for image hover or at the end of the product-grid-item.liquid?
Thanks a lot :)
Hi,
How did you get the hover effect to work?
I am having the same issue. Also using the Brooklyn theme. Tried several ways, but nothing seem to add the hover effect. I would like for my last product image to show on hover.
Which code did you paste into the theme.scss.liquid (I am guessing at the bottom of the code) and which code did you add to the product-grid-item.liquid?
Best,
Anna
Im new to this community and its hard to navigate around so sorry in advance for just jumping in. But I currently have the Brooklyn theme on my page and the numbers on the bottom of the page doest bold when i go from one page to the next. It makes it really hard to know what page I'm on and i want to fix this before I launch my store. Can someone please help. @Ryan45
User | Count |
---|---|
520 | |
211 | |
129 | |
78 | |
45 |