How to add 'Read more' in the Rich Text section

Russell1232
Excursionist
19 1 2

Hello,

Looking to add a 'Read more' and perhaps 'Read less' button to a Rich Text section in my front page store. Using Brooklyn theme. Any help is appreciated.

Thanks,

KetanKumar
Shopify Partner
16902 1846 6320

@Russell1232 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Russell1232
Excursionist
19 1 2

Hi ketankumar,

 
Here is my url: Caribou49.myshopify.com
 
Thanks so much.
0 Likes
KetanKumar
Shopify Partner
16902 1846 6320

@Russell1232 

thanks 

can you please try this code

https://codepen.io/royketelaar/embed/avWxve?theme-id=light#:~:text=CodePen%20Embed%20%2D%20Read%20mo....

https://codepen.io/royketelaar/pen/avWxve

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Russell1232
Excursionist
19 1 2

Hi KetanKumar,

There is no place to add the html code in the Rich Text section, but I created a custom html section and applied it there. However, I am not getting the desired results. I copy and pasted the html code in the 'HTML section' however it does seem to work. (See below) You can see that the 'Read more' text is present and so is all the text. When I click on the 'Read more' text it simply refreshes the web page. Perhaps I am doing something wrong. Please let me know what you think.

 

Read more Capture.PNG

0 Likes
KetanKumar
Shopify Partner
16902 1846 6320

@Russell1232 

can you please user HTML, CSS and javascript same as demo

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Russell1232
Excursionist
19 1 2

Thank you @KetanKumar . I am just not sure where to apply the html, css and javascript. Still learning. My apoligies. Please let me know how to apply all these codes.

0 Likes
KetanKumar
Shopify Partner
16902 1846 6320

@Russell1232 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Russell1232
Excursionist
19 1 2

Hi KetanKumar,

I was able to add the .js code to theme.js.liquid and the css code to theme.scss.liguid. I also added the html text to a new custom html section. It looks pretty good except when I click on read more or read less, which function well, the page refreshes to the top thereby losing one's place in the text in question. Any ideas?

Best,

0 Likes
KetanKumar
Shopify Partner
16902 1846 6320

@Russell1232 

can you please share further issue screenshot or video

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes