Plak- Collection page issue with different size photos flickering with add to cart button 2.3 Plak

Hi @acumetalfab

Jasmine from Plak theme support here,

The flickering in your collection page is due to the images ratio, your images need to have exacly the same ratio, for ex, if one image is 600x600 which is a ratio of 1:1, you need resize all the other images to have a unique ratio, this way the image swipe on hover will be seamless

Since you seem to have lot of products, resizing the images will take some considerable time, you can temporary disable the images swipe on hover by following these steps :

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file product-card-grid.liquid
• Replace the entire code with THIS ONE

• Click Save

Note that you may need to reinsert your review app code

Let me know if it worked and if you need any other assistance

Kind regards,
Jasmine

@plakadmin

I appreciate it. Resizing my images is not an option. Too many to do. I think this could be a good option to make this code a option on the theme builder for future updates. I am sure I can't be the only one with this issue. 

Posted by: @acumetalfab

@plakadmin

I appreciate it. Resizing my images is not an option. Too many to do. I think this could be a good option to make this code a option on the theme builder for future updates. I am sure I can't be the only one with this issue. 

Thanks for the insight, we added this to our to do list, we will consider adding this option to our new releases

Kind regards,
Katrine

Hello. It is me again, version 2.7 does not work with this code. Is there an updated code I can paste into this section. Unless the section changed where I would paste this code into? Please help. 

Posted by: @acumetalfab

Hello. It is me again, version 2.7 does not work with this code. Is there an updated code I can paste into this section. Unless the section changed where I would paste this code into? Please help. 

Hi @acumetalfab, Keeping you posted here. I have requested the Dev team to look at this issue. Please allow 24-48h (from now) for us to provide a tested solution.

Hi @acumetalfab, The code pasted below is working fine on your store as we can see it. Our Dev Team has applied the fix already: https://www.acumetalfab.com/collections/surface-mount-drip-trays-with-drains.

In the long run, you might want to change all images to same size for better experience.

Hope it helps!

<style>.tooltiptext.add-to-wishlist{top:50px!important}.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{position:relative!important;top:0!important;transform:translateX(0)!important;padding-top:8px;padding-bottom:8px}.product-hover-icon-container .add-to-wishlist{margin-left:5px}.product-card .tooltipp.anim-hover{overflow:hidden}.product-hover-icon-container{transform:translateY(50px);visibility:hidden;transition:all .4s ease}.tooltipp.anim-hover:hover .product-hover-icon-container{transform:translateY(0);visibility:visible}@media only screen and (min-width:750px){.product-hover-icon-container{position:absolute;bottom:0;left:0;display:flex;align-items:center;height:45px;width:100%;background:rgba(0,0,0,.4);justify-content:center}}@media only screen and (max-width:950px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:10px}}@media only screen and (max-width:800px){.product-hover-icon-container .btn,.product-hover-icon-container .tooltiptext{font-size:9px}}@media only screen and (max-width:750px){.tooltipp .add-to-wishlist{display:none}}@media screen and (min-width:767px){.tooltipp{position: relative;display: inline-block;}.tooltipp .tooltiptext{visibility: none;width: auto;text-align: center;border-radius: 6px;padding: 5px;position: absolute;z-index: 1;top: 10px;}.tooltipp .tooltiptext{display:none;}.tooltipp .tooltip-addtocart{display: none;}.tooltipp:hover .tooltip-addtocart{display: inline-block;}.tooltipp:hover .tooltiptext{display:inline-block;}}.has-secondary.grid-view-item__link img.secondary{display:none;transition:1s;}.quick-view-button{transition:.3s!important}.quick-view-button:hover{transform:translateX(7px)}@media screen and (min-width:767px){.has-secondary.grid-view-item__link:hover img.grid-view-item__image{display:none;transition : 2s;}.has-secondary.grid-view-item__link img.secondary{display:none;transition : 2s;}.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}}@media screen and (max-width:767px){.has-secondary.grid-view-item__link p.secondary{display:none}}.anim-hover img{transition:1.4s;opacity : 1;}.anim-hover:hover img{opacity: 0.8;}.icn {position: absolute;top: 2px;width: 50px;height: 50px;border-radius: 50%;right: 28px;text-align: center;padding: 0 10px;line-height: 52px;font-size : 15px;@media only screen and (max-width: 749px) {width: 40px;height: 40px;  font-size : 10px;line-height: 40px;}}.new{z-index: 2;background: {{settings.newp-bkclr}};color: {{settings.newp-clr}};}.days-ago{top: 0px;width: 45px;height: 45px;font-size: 13px;padding: 3px;border-radius: 50%;background: {{settings.newp-bkclr}};line-height: 12px;color: {{settings.newp-clr}};overflow: hidden;text-align: center;right: 0px;@media only screen and (max-width: 749px) {width:30px;height:30px;font-size : 9px;line-height: 9px;}}.sale{right: 20px;z-index: 2;background: {{settings.salep-bk}};color: {{settings.salep-txt}};}.product-card .tooltipp{width: 100%;}.product-card .tooltipp img{width: 100%;}</style>
{% unless grid_image_width %}
{%- assign grid_image_width = '275x275' -%}
{% endunless %}
<div class="  grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card" data-product-card>
   <a class=" grid-view-item__link {% if product.images.size > 1 and settings.enable_hover_button %} has-secondary{% endif %}" href="{{ product.url | within: collection }}" title="{{ product.title}}">
      <div class="{% if settings.enable_hover_button%} tooltipp {% endif %} anim-hover ">
         {% for media in product.media limit:1%}
         {% case media.media_type %}
         {% when 'image' %}
         <img  style="width:100%;height:100%;"class="grid-view-item__image lazyload animation--{{settings.lazyloading-effect}}" src="{{ 'blank.jpg' | asset_url }}" data-src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}" data-expand="-40">
         {% if product.images.size > 1 %}
         {% if settings.enable_hover_button %}
         <img  style="width:100%;height:100%;"class="secondary small--hide lazyload lazypreload" src="{{ 'blank.jpg' | asset_url }}" data-src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}" data-expand="-40">
         {% endif %}
         {% endif %}
         {% when 'external_video' %}
         {{ media | external_video_tag: class: "grid-view-item__image lazyload" }}
         {% when 'video' %}
         {{ media | video_tag: loop: true, autoplay: true, muted: true , class: "grid-view-item__image lazyload" }}        
         {% endcase %}
         {% endfor %}
         {% render 'product-labels' %}
         {% if settings.enable_hover_button and product.available %}
          <div class="product-hover-icon-container">
         {%- if product.variants.size > 1 -%}
         {% if template != 'index' %}
   <a class="btn tooltiptext quick-view quick-view-button small--hide" data-handle="{{ product.handle }}" href="javascript:void(0);" title="select options" > {{ 'collections.general.select_option' | t }}</a>
   {% endif %}
   {%- else -%}
   <form method="post" action="/cart/add" class="small--hide tooltip-addtocart ">
   <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
   {% if product.template_suffix == "preorder" %}
   <input type="submit" value="{{ 'products.product.preorder' | t }}" class="btn" />
   {% else %}
   <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" class="btn" />
   {% endif %}        
   </form> 
   {%- endif -%}
   {%- endif -%}
   {% if settings.enable_wishlist %}  
      <a href="#" data-product-handle="{{ product.handle }}" class="btn tooltiptext add-to-wishlist" title="{{ 'customer.account.my_wishlist' | t }}"><i class="fa fa-heart-o"></i></a>
   {% endif %}
   {% if settings.enable_hover_button and product.available %}
        </div>
   {% endif %}
   </div>
     <a href="{{ product.url | within: collection }}" title="{{ product.title  }}">
   <div class="h4 grid-view-item__title">                   
      {{product.title}}
   </div>
   <div class="grid-view-item__meta">
      {% render 'product-price', variant: product, show_vendors: section.settings.show_vendor %}
   </div>
       {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: false, product: product %}
     </a>
   </a>
</div>

Thank you for applying that. Before you guys updated it I turned off the rollover image. I may just have to do that from now on. I can not resize all my images. i tried an app once and it messed up my 1700 plus products. We have a drawing for specifications on each different product since we have hundreds of sizes and hole configurations for our beer equipment. 

Again I believe this could be a good option for future releases as an option. I know I cant be the only one and I do not want to be a pain. haha.

Thank you again. 

Hi @acumetalfab, We appreciate your feedback. The team has been made aware of your feedback now. We will include it in a future release. It is a good time request features because we are building a roadmap for future releases. Please keep feedback coming. We appreciate new ideas that will add value to you and other merchants. This one is a great example of how we can make Plak Theme even better!