Show second image on hover on the Debut Theme

Debut theme second image on hover
Reading Time

Most paid themes swap the collection thumbnail when you hover. Debut does not. This snippet adds that hover image on collection cards so shoppers can see a second photo without opening the product. No app. Last tested on Debut in 2026.

You replace product-card-grid.liquid and paste a small block into Theme settings. This overwrites that one file. Download a backup first.

This is Debut only. If you want to pick which image shows on hover on other themes, that's a different tutorial: Choose which image to show on hover.

Live preview: Debut hover demo.

Download a backup of the theme first. If something breaks you can roll back in about 10 seconds.

Download a Shopify theme backup before editing code

What you'll paste

The gist has two files. You need both.

Snippet file you replace:

snippets/product-card-grid.liquid

Theme settings file:

config/settings_schema.json

How to replace the product card

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find Debut, click the 3 dots > Edit code.
  3. Open snippets/product-card-grid.liquid. Select everything and delete it.
  4. Copy the ezfy-debut-product-card-grid.liquid file from this gist, paste it in and save:

    product-card-grid.liquid replaced with the Debut hover snippet

Any previous custom edits in that one file will be overwritten. That's why the backup matters.

How to add the Theme settings

The second file in the gist is a JSON fragment. Do not replace the whole settings_schema.json.

  1. Copy the ezfy-debut-hover-settings-schema.json file from the gist.
  2. Open config/settings_schema.json.
  3. Scroll to the bottom. Paste the fragment before the last line, after the last }. The file must still end with ].

    Paste the hover settings fragment before the last line of settings_schema.json

    Paste to the right of the closing brace on the second last line

  4. Save.

How to turn it on

  1. From Online Store > Themes, click Customize on Debut.
  2. Open Theme settings and find the EZFY hover settings.
  3. Enable it, pick whether hover shows the second image and save. Check a collection page on desktop. Hover is a mouse feature so phones will not show it.

If you get a settings_schema error

You pasted at the very bottom. The last character in that file has to be ].

settings_schema.json error from pasting on the last line

If collection cards look broken, restore the backup of product-card-grid.liquid and paste again. One missed character in that file will wreck the grid.

This snippet is Debut. It will not work on Dawn.

If you get stuck, tell me whether the error is in settings_schema.json or the product card file. That usually solves it.

Back to blog

Leave a comment

Related Articles