Debut Theme: enable swiping to product page images

Debut theme is, undoubtedly, one of the best themes out there be it paid or free. However it comes with one big flaw complained by many that is its product page lacking a proper swiping functionality to improve the UX of the website.

In this tutorial I’ll teach you step-by-step how to implement a swiping functionality for the Debut theme.

Download the files clicking here. (live preview)

Complete details with all included features can be found here.

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Getting ready and downloading the code files

  1. In your Shopify admin, go to Online Store > Themes Actions Edit Code.
  2. There will be three files inside of the .zip you downloaded: product-template.txt , featured-template.txt and theme.txt.

Setting up the product-template.txt file

  1. Open the product-template.txt file and copy all the code in there.
  2. Now go back to your Shopify admin, find the product-template.liquid file in your theme.
  3. Delete everything and paste the code that you copied.
  4. Save. It should look like this:

Setting up the theme.txt file

  1. Now open the downloaded file named theme.txt and copy all the code in there.
  2. In your Shopify theme, find the file theme.js.
  3. Do not delete everything in there! Instead, scroll all the way down and, at the very bottom of the file, paste the code.
  4. Click on “save”.

Setting up featured-product.txt (optional)

  1. Open the downloaded file named featured-product.txt and copy all the code in there.
  2. In your Shopify theme, find the file featured-product.liquid.
  3. Delete everything in there and paste the code that you copied.
  4. Click on “save”.

Something went wrong, there is a bug or I can’t install it

No worries at all! We’ll be more than happy to help you out.

Just please send us an email at ezfycode@gmail.com with your website URL and we’ll get back to you on the same day to assist you and get it installed.

View all blogs
Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.

In need of a Shopify developer?

Feel free to reach out, we'll work together to find a custom solution that attend your needs.

Request a free quote

Contact Us

Contact us to learn more about how we can help grow your business. No strings attached.

Send us an e-mail and we'll get back to you within 24 hours! Before you click on "send message" please make sure to do the ReCaptcha so your e-mail can be sent safely. 🙂

Loading...