Can I easily remove the cart hover feature in Perly - Fashion Shopify Theme?

[NordicAlex]

Hello.

I want to remove this. is that easy to remove so when i hover the mouse over i dont get the cart, compair price thing.

Perly - Fashion Shopify Theme

[Bo]

Hey there, @NordicAlex 

Bo here from Shopify Support! 

While this is a third party theme that is not supported by Shopify Support, I have played around with it quite a bit on my test store and this is a relatively easy quick fix. That said - this is not a Shopify Supported theme and before trying this I would 100% recommend reaching out to the theme developers, ThemeForest, before making any changes to be sure this will not negatively affect the theme in any way. You can contact their support team here.

NB When editing the code of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

This tutorial is specific to an unedited version of the theme. We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

1. Go to Online Store > Current Theme > Actions > Edit Code. 
2. Open the Snippets Folder > product-grid-item.liquid.
3. Look for the following:  <div class="hover-content">
4. Add {% comment %} at the very start of this line, it should look like this: {% comment %}  <div class="hover-content">
5. Search for the following:  {% include 'product-badge' %}.
6. At the very start of this line add {% endcomment %}, it should look like this: {% endcomment %}  {% include 'product-badge' %}
7. The finished code should look like this:

{% comment %} <div class="hover-content">
      {%- unless product.description contains '[affiliate_link]' -%}
      <div class="hover-btns">
        {%- if product.available -%}
        {%- if settings.product_cart_type == 'ajax_spin_cart' -%}
        <a href="javascript&colon;void(0);" onclick="{{ func }}; return false;" class="ajax-spin-cart sin-btn">
          <span>
            <span class="cart-title"><i class="ion-bag"></i></span>
            <span class="cart-loading"><i class="fa fa-spinner animated rotateIn infinite"></i></span>
            <span class="cart-added"> <i class="fa fa-check-square"></i></span>
            <span class="cart-unavailable"><i class="ion-bag"></i></span>
          </span>
        </a>
        {%- elsif settings.product_cart_type == 'ajax_popup_cart' -%}
        <a href="javascript&colon;void(0);" onclick="{{ func }}; return false;" class="sin-btn">
          <span>
            <span class="cart-title"><i class="ion-bag"></i></span>
          </span>
        </a>
        {%- elsif settings.product_cart_type == 'without_ajax_cart' -%}
        <form action="/cart/add" method="post" enctype="multipart/form-data">
          <select name="id" style="display:none;">
            {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="">
            <span>
              <span class="cart-title"><i class="ion-bag"></i></span>
            </span>
          </button>
        </form>
        {%- endif -%}
        {%- else -%}
        <button class="cart-disable">
          <span class="cart-text"><i class="ion-bag"></i></span>
        </button>
        {%- endif -%}  
        {%- if settings.compare_product_enalbe -%}
        <a href="#"  class="compare sin-btn" data-pid="{{ product.handle  }}" title="" data-original-title="Compare"><i class="ion-android-options"></i></a>
        {%- endif -%}
        {%- if settings.product_quickview_enalbe -%}
        <a class="action-plus sin-btn" title="Quick View" data-toggle="modal" data-target="#quickViewModal" href="javascript&colon;void(0);" 
           onclick="quiqview('{{ product.handle | handleize }}')"><i class="ion-android-open"></i>
        </a>
        {% endif %}
      </div>
      {%- endunless -%}
    </div> 
 {% endcomment %}  {% include 'product-badge' %}

Once finished, click Save! That is the code specifically for the hover function and so, by adding the comment tags you are hiding it from the rest of the product-grid-item.liquid. As mentioned this is a third party theme that is completely supported by ThemeForest, not Shopify, and so if you run into difficulty or do not feel comfortable making these changes please reach out to the theme developers in the link above. If you make a mistake you can roll the theme file back to the original version as per this guide.

All the Best,

Bo 

[NordicAlex]

Wow. Thats realy nice detailed Bo.

Thanks for the replay.

10+ for you.