When you are announcing products that require descriptions that are rich in details, they can end up adding a large wall of text to your product page which, very likely, will end up scaring your potential customers away.

A common solution for this type of problem is adding a “read more” type of button. Although there are apps that will enable this functionality for you, they ship tied up with monthly fees and a lot of bloat coded that will end up slowing down your store's website.

In this tutorial I'll show you how you can easily add that by simply pasting a piece of code to your Dawn theme.

Downloading the code files

You can download the code files clicking here. (live preview)

Complete details about it 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.

Step 1: opening the code editor

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Inside the .zip you downloaded you'll find two files:
   1. ezfy-read-more.txt
   2. settings_schema.txt

Step 1: creating the code snippet

1. Open the ezfy-read-more.txt file and copy all the code in there.
2. Now go back to your Shopify code editor and below Snippets click on “Add a new snippet“.
   
   Name it exactly: ezfy-read-more
   
   
   
3. Paste the code that you copied and click on save.
   

Step 2: 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:
   
   </body>
3. Paste the following code before the </body> tag you found:
   
   

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

   
4. Click on save.

4th and final step: updating the settings_schema.txt file

1. Open the settings_schema.txt file and copy all the code in there.
2. In your Shopify code editor find the settings_schema.json file in your theme.
3. Scroll all the way down.
4. Paste the code before the last line, after the } sign, as indicated the image below.
   
   So, for example, in this case, the code should be pasted on the line 351 (the quantity of lines may vary depending of your theme, so don't worry if it shows a different number on yours).
   

1. Paste the code to the right of the } character that the arrow is pointing to.
   
   
   
2. Save and you're ready to go!

Troubleshooting common issues

Question: It shows me an error after I edit the settings_schema.json file. What do I do?

Answer: You very likely pasted the code at the bottom of the file. Please make sure you paste the code at the penultimate (second last) line as indicated in step 4.

Your file must end with this character: ]

If you're still facing any issues please reach out to us via ezfycode@gmail.com and we'll be more than happy to help you out!

Customizing the “read more” looks and feels

1. On the top right of the theme you're editing, click on “Customize theme”.
   
   2. Click on “theme settings”, at the bottom.
   
   3. Now click on “EZFY Read More” and you can customize it as per your wish.
   

If you have any issues or questions just reach out to us at ezfycode@gmail.com and we'll be very happy to help you!