How to add a read more / read less button for rich text boxes in Honey Theme?

Solved

How to add a read more / read less button for rich text boxes in Honey Theme?

SClaudiu
Excursionist
13 1 1

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.

Screenshot_2.png

Screenshot_3.png

 Thank you!

Accepted Solution (1)

sahilsharma9515
Shopify Partner
1266 165 244

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 4 (4)

sahilsharma9515
Shopify Partner
1266 165 244

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


SClaudiu
Excursionist
13 1 1

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. 

sahilsharma9515
Shopify Partner
1266 165 244

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


SClaudiu
Excursionist
13 1 1

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?