product pic hover over effect and add to cart button conflict

DELONG_HUANG
Excursionist
37 0 5

Hi,

 

I have 2 codes, one is to hover over to the 2nd pic when you move your mouse to the picture of a product in the collection. the other is to have "ADD TO CART" button in the collection page.

right now when I put 2 together in the product card grid liquid, now it is showing one more pic in the 2nd row. does anyone know which part of the code i should remove to get rid of the 2nd row of the pic?

Thank you!

 

 

1.PNG

 

Hover over effect when you move your mouse to product pic:

{% 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[1] | img_url: grid_image_width }}" alt="{{ product.images[1] | product_img_url: 'medium' }}">
{% 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>



"ADD TO CART" button in colletcion page:


<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="">
<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[1] | img_url: grid_image_width }}" alt="{{ product.images[1] | product_img_url: 'medium' }}">
{% 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>


</div>
</div>

<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">

</noscript>


<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
<div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
{% include 'product-price', variant: product %}

</div>

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}

{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
{% else %}
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>
<input type="submit" value="See More Options" class="btn product-form__cart-submit" />

 

{% endif %}

 

</form>
</div>

0 Likes

Hi,
Please share your store URL with password (If Needed)

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
DELONG_HUANG
Excursionist
37 0 5

Hi,


@oscprofessional wrote:

Hi,
Please share your store URL with password (If Needed)


the store URL is : www.minidrago.com

0 Likes

On which page you want changes?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
DELONG_HUANG
Excursionist
37 0 5

@oscprofessional wrote:

On which page you want changes?


Hi, I want to change the collection page. Right now I didn't enable the code on the website. Please let me know if you would like me to enable them

0 Likes

Please enable it. you want to remove this part?

 

oscprofessional_0-1614322417232.png


I cant find this section!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
DELONG_HUANG
Excursionist
37 0 5

@oscprofessional wrote:

Please enable it. you want to remove this part?

 

oscprofessional_0-1614322417232.png


I cant find this section!


 

Hi, I have enabled it. Thanks.

 

https://minidrago.com/collections/dollhouse

0 Likes

Hi,

search this class  and remove this code.

oscprofessional_0-1614323920030.png

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
DELONG_HUANG
Excursionist
37 0 5

@oscprofessional wrote:

Hi,

search this class  and remove this code.

oscprofessional_0-1614323920030.png

 


Hi, thank you. where should I find this code?

i dont see it in the 

product-card-grid.liquid nor this is part of my code i pasted above.

 

0 Likes

It is collection page so it should be in collection liquid file..

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes