I am looking for some code that I could use to customise my Shopify store pages. Specifically, I would like the ability to collapse/expand text in rich text boxes that I have at the top of each of my stores pages (where I describe what each page is about etc.)
Ideally, if the text I use reaches more than say, 2 or 3 lines, then there would be a little action button (that is always visible) that could be clicked that says “show more” or “show less” , which would obviously expand or collapse the rich text box if a site visitor wishes to read more/read less of the content.
I have seen this type of functionality on many sites before. Is anyone able to share any knowledge on the subject? Of some actual code I could use?
Many thanks
Ryan
hi @ryan_1_1 ,
You can follow this docs: https://rubyyagi.com/how-to-truncate-long-text-and-show-read-more-less-button/
If you cannot work follow and need help about technical, you can contact to me.
1 Like
Hi. Many thanks for your quick reply. I will look at the link/docs you have shared tomorrow and hopefully I can implement the solution.
I will let you know if I have any further queries or need any help!
Many thanks
Ryan
Hello @ryan_1_1 there are many ways to achieve this functionality in Shopify store.
If your theme allows you to add html section then you can simply achieve this by using a short JS.
In your custom HTML section you need to add this code:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel...erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
Please let me know if you need my help to make this functionality on your store.
Hi. Many thanks for your feedback. It seems like a nice quick solution, however you will have to forgive me as I am very new to all this and no nothing about coding… Where would I need to copy this code to? If I select “edit code” in my theme, if you can point me to the right section that would be useful.
Alternatively, if you meant within the theme options itself, the only options I have for rich text boxes are as per the image attached, and after clicking on each it doesn’t look like there is anywhere to add any code.
If you are able to elaborate of help further I would be most grateful.
Thanks
Ryan
You will likely never find a response that works as no-one seems to understand the value in customizing CSS and most suggestions will required you edit the overall them code on the back end (Customize Theme (…)-> Edit Code-> instead of for a single page element.
You can waste all the time you want, you will not likely find a useful solution on this platform.
1 Like
