CHANGE PRODUCT IMAGE WHEN HOVER ( using the debut theme)

Topic summary

A user working with Shopify’s Debut theme is seeking help to implement a hover effect that changes product images on collection grid pages. They’ve shared their current Liquid code, which includes grid layout configurations and product card rendering logic.

Current Status:

  • The original poster has provided their theme code snippet showing the collection grid structure
  • Two support representatives (from KetanKumar and GemPages) have responded offering assistance
  • Both requested the store URL to examine the issue directly

Next Steps:

The discussion remains open, with no solution provided yet. The hover effect typically requires CSS modifications and potentially JavaScript to swap between product images on mouseover.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

How can i change the product image change when hovering over on my collection grid? here is the code of the liquid placed under, using the debut theme

{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %}

{%- assign collection = collections[section.settings.collection] -%}

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = ‘medium-up–one-half’ -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-third’ -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-quarter’ -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-fifth’ -%}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

@media only screen and (max-width: 749px){ .grid__item--{{section.id}} { width: 25% !important; clear: initial !important; } }
    {% for product in collection.products limit: product_limit %}
  • {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
  • {% else %}

    {% for i in (1..product_limit) %}

  • {{ 'homepage.onboarding.product_title' | t }}
    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
  • {% endfor %} {% endfor %}

{% if section.settings.show_view_all %}


{% endif %}

{% schema %}
{
“name”: {
“cs”: “Propagovaná kolekce”,
“da”: “Udvalgt kollektion”,
“de”: “Vorgestellte Kategorie”,
“en”: “Featured collection”,
“es”: “Colección destacada”,
“fi”: “Esittelyssä oleva kokoelma”,
“fr”: “Collection en vedette”,
“it”: “Collezione in evidenza”,
“ja”: “特集コレクション”,
“ko”: “추천 컬렉션”,
“nb”: “Utvalgt samling”,
“nl”: “Uitgelichte collectie”,
“pl”: “Polecana kolekcja”,
“pt-BR”: “Coleção em destaque”,
“pt-PT”: “Coleção em destaque”,
“sv”: “Utvald kollektion”,
“th”: “คอลเลกชันแนะนำ”,
“tr”: “Öne çıkan koleksiyon”,
“vi”: “Bộ sưu tập nổi bật”,
“zh-CN”: “特色产品系列”,
“zh-TW”: “精選商品系列”
},
“class”: “index-section”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: {
“cs”: “Nadpis”,
“da”: “Overskrift”,
“de”: “Titel”,
“en”: “Heading”,
“es”: “Título”,
“fi”: “Otsake”,
“fr”: “En-tête”,
“it”: “Titolo”,
“ja”: “見出し”,
“ko”: “제목”,
“nb”: “Overskrift”,
“nl”: “Kop”,
“pl”: “Nagłówek”,
“pt-BR”: “Título”,
“pt-PT”: “Título”,
“sv”: “Rubrik”,
“th”: “ส่วนหัว”,
“tr”: “Başlık”,
“vi”: “Tiêu đề”,
“zh-CN”: “标题”,
“zh-TW”: “標題”
},
“default”: {
“cs”: “Propagovaná kolekce”,
“da”: “Udvalgt kollektion”,
“de”: “Vorgestellte Kategorie”,
“en”: “Featured collection”,
“es”: “Colección destacada”,
“fi”: “Esittelyssä oleva kokoelma”,
“fr”: “Collection en vedette”,
“it”: “Collezione in evidenza”,
“ja”: “特集コレクション”,
“ko”: “추천 컬렉션”,
“nb”: “Fremhevet samling”,
“nl”: “Uitgelichte collectie”,
“pl”: “Polecana kolekcja”,
“pt-BR”: “Coleção em destaque”,
“pt-PT”: “Coleção em destaque”,
“sv”: “Utvald kollektion”,
“th”: “คอลเลกชันแนะนำ”,
“tr”: “Öne çıkan koleksiyon”,
“vi”: “Bộ sưu tập nổi bật”,
“zh-CN”: “特色产品系列”,
“zh-TW”: “精選商品系列”
}
},
{
“id”: “collection”,
“type”: “collection”,
“label”: {
“cs”: “Kolekce”,
“da”: “Kollektion”,
“de”: “Kategorie”,
“en”: “Collection”,
“es”: “Colección”,
“fi”: “Kokoelma”,
“fr”: “Collection”,
“it”: “Collezione”,
“ja”: “コレクション”,
“ko”: “컬렉션”,
“nb”: “Samling”,
“nl”: “Collectie”,
“pl”: “Kolekcja”,
“pt-BR”: “Coleção”,
“pt-PT”: “Coleção”,
“sv”: “Produktserie”,
“th”: “คอลเลกชัน”,
“tr”: “Koleksiyon”,
“vi”: “Bộ sưu tập”,
“zh-CN”: “收藏”,
“zh-TW”: “商品系列”
}
},
{
“type”: “range”,
“id”: “grid”,
“label”: {
“cs”: “Počet produktů na řádek”,
“da”: “Produkter pr. række”,
“de”: “Produkte pro Reihe”,
“en”: “Products per row”,
“es”: “Productos por fila”,
“fi”: “Tuotteita per rivi”,
“fr”: “Produits par rangée”,
“it”: “Prodotti per riga”,
“ja”: “行あたりの商品数”,
“ko”: “열 별 제품”,
“nb”: “Produkter per rad”,
“nl”: “Producten per rij”,
“pl”: “Liczba produktów na wiersz”,
“pt-BR”: “Produtos por linha”,
“pt-PT”: “Produtos por linha”,
“sv”: “Produkter per rad”,
“th”: “สินค้าต่อแถว”,
“tr”: “Satır başına ürün”,
“vi”: “Số sản phẩm trên một hàng”,
“zh-CN”: “每行产品数”,
“zh-TW”: “每列產品數”
},
“min”: 2,
“max”: 5,
“step”: 1,
“default”: 3
},
{
“type”: “range”,
“id”: “rows”,
“label”: {
“cs”: “Řádky”,
“da”: “Rækker”,
“de”: “Reihen”,
“en”: “Rows”,
“es”: “Filas”,
“fi”: “Rivit”,
“fr”: “Rangées”,
“it”: “Righe”,
“ja”: “行”,
“ko”: “열”,
“nb”: “Rader”,
“nl”: “Rijen”,
“pl”: “Wiersze”,
“pt-BR”: “Linhas”,
“pt-PT”: “Linhas”,
“sv”: “Rader”,
“th”: “แถว”,
“tr”: “Satırlar”,
“vi”: “Hàng”,
“zh-CN”: “行数”,
“zh-TW”: “列”
},
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 2
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: {
“cs”: “Zobrazit dodavatele produktů”,
“da”: “Vis produktleverandører”,
“de”: “Produktanbieter anzeigen”,
“en”: “Show product vendors”,
“es”: “Mostrar proveedores del producto”,
“fi”: “Näytä tuotteen myyjät”,
“fr”: “Afficher les vendeurs”,
“it”: “Mostra fornitori prodotto”,
“ja”: “商品の販売元を表示する”,
“ko”: “제품 공급 업체 표시”,
“nb”: “Vis produktleverandører”,
“nl”: “Productleveranciers weergeven”,
“pl”: “Pokaż dostawców produktu”,
“pt-BR”: “Mostrar fabricantes do produto”,
“pt-PT”: “Mostrar fornecedores do produto”,
“sv”: “Visa produktleverantörer”,
“th”: “แสดงผู้ขายสินค้า”,
“tr”: “Ürün satıcılarını göster”,
“vi”: “Hiển thị nhà cung cấp sản phẩm”,
“zh-CN”: “显示产品厂商”,
“zh-TW”: “顯示產品廠商”
},
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_view_all”,
“label”: {
“cs”: “Zobrazit tlačítko Zobrazit vše”,
“da”: “Vis knappen "Se flere"”,
“de”: “‘Alle anzeigen’ Button anzeigen”,
“en”: “Show ‘View all’ button”,
“es”: “Mostrar el botón ‘Ver todo’”,
“fi”: “Näytä "Näytä kaikki" -painike”,
“fr”: “Afficher le bouton “Tout voir””,
“it”: “Mostra il pulsante "Visualizza tutto"”,
“ja”: “「すべて表示」ボタンを表示する”,
“ko”: “‘모두 보기’ 버튼 표시”,
“nb”: “Vis «Se alle»-knapp”,
“nl”: “Knop ‘Alles weergeven’ weergeven”,
“pl”: “Pokaż przycisk „Wyświetl wszystkie””,
“pt-BR”: “Mostrar botão ‘Ver tudo’”,
“pt-PT”: “Mostrar botão ‘Ver tudo’”,
“sv”: “Visa "Visa alla"-knappen”,
“th”: “แสดงปุ่ม ‘ดูทั้งหมด’”,
“tr”: “"Tümünü görüntüle" düğmesini göster”,
“vi”: “Hiển thị nút "Xem tất cả"”,
“zh-CN”: “显示“查看全部”按钮”,
“zh-TW”: “顯示「檢視全部」按鈕”
},
“default”: false
}
],
“presets”: [
{
“name”: {
“cs”: “Propagovaná kolekce”,
“da”: “Udvalgt kollektion”,
“de”: “Vorgestellte Kategorie”,
“en”: “Featured collection”,
“es”: “Colección destacada”,
“fi”: “Esittelyssä oleva kokoelma”,
“fr”: “Collection en vedette”,
“it”: “Collezione in evidenza”,
“ja”: “特集コレクション”,
“ko”: “추천 컬렉션”,
“nb”: “Utvalgt samling”,
“nl”: “Uitgelichte collectie”,
“pl”: “Polecana kolekcja”,
“pt-BR”: “Coleção em destaque”,
“pt-PT”: “Coleção em destaque”,
“sv”: “Utvald kollektion”,
“th”: “คอลเลกชันแนะนำ”,
“tr”: “Öne çıkan koleksiyon”,
“vi”: “Bộ sưu tập nổi bật”,
“zh-CN”: “特色产品系列”,
“zh-TW”: “精選商品系列”
},
“category”: {
“cs”: “Kolekce”,
“da”: “Kollektion”,
“de”: “Kategorie”,
“en”: “Collection”,
“es”: “Colección”,
“fi”: “Kokoelma”,
“fr”: “Collection”,
“it”: “Collezione”,
“ja”: “コレクション”,
“ko”: “컬렉션”,
“nb”: “Samling”,
“nl”: “Collectie”,
“pl”: “Kolekcja”,
“pt-BR”: “Coleção”,
“pt-PT”: “Coleção”,
“sv”: “Produktserie”,
“th”: “คอลเลกชัน”,
“tr”: “Koleksiyon”,
“vi”: “Bộ sưu tập”,
“zh-CN”: “收藏”,
“zh-TW”: “商品系列”
}
}
]
}
{% endschema %}

1 Like

@designdevil

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi @designdevil ,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

https://gwq7315bd95mayfx-72267563298.shopifypreview.com

https://gwq7315bd95mayfx-72267563298.shopifypreview.com here is link to store