Shopify themes, liquid, logos, and UX
Hello, I would like to make all feature cards of a product the same size and where the text is too long, to just show read more as in the example below.
Thank you!
Solved! Go to the solution
This is an accepted solution.
Hi @SClaudiu It will need custom coding to achieve this and for providing you the exact code I will need the access of your theme files, but I can provide you the base code which you can edit according to your theme code files.
<script>
document.addEventListener('DOMContentLoaded', function() {
var content = document.getElementById('rich-text-content');
var button = document.createElement('button');
button.textContent = 'Read More';
button.className = 'read-more-button';
content.parentNode.insertBefore(button, content.nextSibling);
button.addEventListener('click', function() {
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
button.textContent = 'Read More';
} else {
content.classList.add('expanded');
button.textContent = 'Read Less';
}
});
});
</script>
Note: You need to update the code according to your theme so that it works.
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
This is an accepted solution.
Hi @SClaudiu It will need custom coding to achieve this and for providing you the exact code I will need the access of your theme files, but I can provide you the base code which you can edit according to your theme code files.
<script>
document.addEventListener('DOMContentLoaded', function() {
var content = document.getElementById('rich-text-content');
var button = document.createElement('button');
button.textContent = 'Read More';
button.className = 'read-more-button';
content.parentNode.insertBefore(button, content.nextSibling);
button.addEventListener('click', function() {
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
button.textContent = 'Read More';
} else {
content.classList.add('expanded');
button.textContent = 'Read Less';
}
});
});
</script>
Note: You need to update the code according to your theme so that it works.
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Hello! If you could tell me the steps of where to look at and where to insert the code, I would really appreciate it. Also, tell me what you need from me to let you know where and what code to use.
Hi @SClaudiu I think you are using multi column option in your theme, if yes then find the multicolumn code in the theme file and you need to add the code there, but before adding the code, you need to edit it according to your theme code, so that the base code will work well with your store.
If you want me to accomplish this for you then you need to provide me the theme code access so that I will look into the code files and add the correct code in your store.
Best Regards
Sahil
- Your
I'm pretty much lost. I found the multi column sections in the theme code but don't know what to do. How do I give you access to the theme code?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025