It's not a problem. It's really going to depend on your theme where you put the code. Generally it's product.liquid in your templates folder. That file often leads to another file, called product-template.liquid in your sections folder. It may be called something else though, I really have no idea. Are you using a free theme?
If you have a product-template.liquid - open it and ctrl+f for "product.description". You should see something like:
{{ product.description }}
You're going to want to take that and wrap it like I had in my code:
<div class="truncate-container">
<div id="truncated-product-description">
{{ product.description | truncate: 40 }} <span id="read-more" class="read-additional">Read more</span>
</div>
<div id="product-description">
{{ product.description }} <span id="read-less" class="read-additional">Read less</span>
</div>
</div>
You have a css file and a javascript file that are linked to your site. What they are, I don't know. Typically the css file is called theme.scss.liquid in your assets folder, and the JS is either theme.js, custom.js (file for you to put your own custom js into), shop.js -- not sure, it could be anything. An alternative option is to put style tags directly above it and script tags directly below it and just add them in right there, this will probably be the easiest path for you but isn't really the "proper" way to do it.
<style>
.truncate-container {
width:300px;
}
.read-additional {
color: blue;
text-decoration: underline;
}
.read-additional:hover {
cursor: pointer;
}
#product-description {
display: none;
}
</style>
<div class="truncate-container">
<div id="truncated-product-description">
Here is your truncated description, it'll go on for.... <span id="read-more" class="read-additional">Read more</span></div>
<div id="product-description">
Here is your truncated description, it'll go on for however long you want to. You can add as many words in here and there'll be no limit to the amount of characters you can use. <span id="read-less" class="read-additional">Read less</span></div>
</div>
<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-product-description');
let full_description = document.getElementById('product-description');
read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)
function showHideDescription(){
let ID = this.id
if(ID === "read-more"){
truncated_description.style.display = "none";
full_description.style.display = "block";
}else {
truncated_description.style.display = "block";
full_description.style.display = "none";
}
}
</script>
If you'd like I can do it for you. Just send me a dm with your store url and I'll request access, duplicate your theme, and make the change and make sure everything is working.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
