Product Card — Hover Zoom

About this module

A Shopify product card whose image gently zooms on hover and reveals a quick-view overlay, perfect for collection grids.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-product-card-zoom, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-product-card-zoom` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-pcz">
     <div class="mh-pcz-media">
       <a href="{{ product.url }}" class="mh-pcz-link">
         {% if product.featured_image %}
           <img src="{{ product.featured_image | image_url: width: 700 }}" alt="{{ product.featured_image.alt | escape }}" width="700" height="700" loading="lazy" class="mh-pcz-img" />
         {% else %}
           {{ 'product-1' | placeholder_svg_tag: 'mh-pcz-ph' }}
         {% endif %}
       </a>
       <div class="mh-pcz-overlay">
         <form method="post" action="/cart/add" class="mh-pcz-form">
           <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
           <input type="hidden" name="quantity" value="1" />
           <button type="submit" class="mh-pcz-quick">{{ section.settings.quick_view_label }}</button>
         </form>
       </div>
     </div>
     <div class="mh-pcz-body">
       {% if section.settings.show_vendor and product.vendor != blank %}
         <span class="mh-pcz-vendor">{{ product.vendor }}</span>
       {% endif %}
       <a href="{{ product.url }}" class="mh-pcz-title">{{ product.title }}</a>
       {% if section.settings.show_price %}
         <span class="mh-pcz-price">{{ product.price | money }}</span>
       {% endif %}
     </div>
   </div>
   
   {% schema %}
   {
     "name": "MH Product Card Zoom",
     "tag": "div",
     "settings": [
       { "type": "range", "id": "image_zoom", "label": "Image zoom", "min": 1, "max": 1.4, "step": 0.05, "default": 1.15 },
       { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false },
       { "type": "checkbox", "id": "show_price", "label": "Show price", "default": true },
       { "type": "text", "id": "quick_view_label", "label": "Quick view label", "default": "Quick add" }
     ],
     "presets": [{ "name": "MH Product Card Zoom", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.