"Read More" button on Debut theme product page

Depending on the type of product that you announce, descriptions can get very detailed and subsequently add an obnoxiously large wall of text to your product page.

A common solution for this type of problem is adding a "read more" type of button. In this tutorial I'll show you how you can easily achieve that.

Downloading the code files

Click here to download the necessary code files & read about the details of how it works. (Live preview of the end result here).

→ Download
→ Live Preview

Creating the code snippet

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Find the snippets folder and, right below it, click on Add a new snippet.
   
3. Create a snippet called ezfy-read-more
   
4. Inside this new snippet, paste the file that you downloaded and save.
   

Adding the code snippet to the product page

1. Find the file named theme.liquid.
2. Inside this file, press CTRL + F (or CMD + F on Mac) and search for:
   
   
3. Paste the following code before the tag you found:
   
   

   {% include 'ezfy-read-more' %}

   
4. Click on save.
5. That is it! Now you can visit any product page that has a description's height longer than 250px to see how it looks.