Help - Removing product title and price from collection pages

15 0 1

Hi Everyone,


I recently just added a quick view feature to my collection pages that allow for customers to hover over the product and product title and price and more details pops up.


I would like to remove the product and price under the product thumbnail and for it only to become visible once the quick view is hovered over. 


My website is -

Password is - Storageplus


I would like it to look like this - Screen Shot 2020-01-18 at 12.46.31 pm.png

Here is my product-card-grid.liquid

{% comment %}
    Renders a product card using "Grid" style
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="hidden">
  <div class="caption">
    <div class="centered">
      {% comment %}
      <p>{{ product.title }}</p>
      <p>{{ product.price | money }}</p>
    </div><!-- end of .centered -->
  </div><!-- end of .caption -->
</div><!-- end of .hidden -->
      <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 %}
      {% endcomment %}
  {% render 'banana-stand-product-list-container', product: product %}

Thanks in Advance 

Shopify Partner
552 108 130


Code you share doesn't belongs to the page you share
Try to search for this code ( <div class="tb-product-card-details">  ) in related templates once you find, comment or remove it.


Want to modify or custom changes on store hire me.
My Email:
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like


Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.tb-content-hover .tb-product-card-details {
    display: block!important;
.tb-product-card-details {
    display: none;



Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
15 0 1

thank you @oscprofessional. Worked a charm.