Debut theme: add a swipe slider to product page images

Debut's product gallery does not swipe. On a phone you get a stack of images. On desktop you click thumbnails. This snippet adds a real slider with arrows, swipe and optional thumbnail carousel. No app. Last tested on Debut in 2026.

You replace two section files and add one JavaScript asset. That overwrites those files. Download a backup first. Apps that do the same job usually inject extra JS and charge a monthly fee. This one is copy/paste.

This is Debut only, the old free OS 1.0 theme. If you're on Dawn, use the Dawn slider instead.

Live preview: Debut slider demo.

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

What you'll paste

The gist has three files. You need all three.

Product page section:

sections/product-template.liquid

Homepage featured product section:

sections/featured-product.liquid

JavaScript asset:

assets/ezfy-debut-slider.js

How to replace the product page

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

Make sure you are editing product-template.liquid, not product.liquid. Those are different files.

How to replace the featured product section

1. Open sections/featured-product.liquid. Select everything and delete it.
2. Copy the ezfy-debut-featured-product.liquid file from the gist, paste it in and save.

If you never use a featured product on the homepage you can skip this file. The product page slider still works.

How to add the JavaScript

1. In Edit code, open the Assets folder and click Add a new asset. Create a blank file named exactly:

   ezfy-debut-slider.js

2. Copy the ezfy-debut-slider.js file from the gist, paste it in and save.
3. Open layout/theme.liquid.
4. Search for:

   </body>

5. Paste this line before that tag, then save:

   <script src="{{ 'ezfy-debut-slider.js' | asset_url }}" defer></script>

If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to customize it

1. From Online Store > Themes, click Customize on Debut.
2. At the top, open the page picker and choose Products > Default product.
3. Click the product section on the left. The EZFY slider settings are in that panel (arrows, loop, max height, thumbnails).
4. Save. Preview on the live product page, not only the editor.

If the slider doesn't move

Check that ezfy-debut-slider.js is in Assets and that the script tag is in theme.liquid before </body>.

Hard refresh the product page. Theme editor save is required before the live page updates.

This snippet is Debut. It will not work on Dawn, Sense or other OS 2.0 themes.

If you get stuck, tell me whether the product page is blank or the images show but don't swipe. That usually solves it.