Read More Read Less Button for Collection Page Description in KALLES Theme

Technical Q&A
1

I want to add long collection descriptions for SEO purposes in KALLES theme collection page. However I do not want to cover all the page with a long description, therefore I need a READ MORE/LESS button.
How can I add it to Kalles?
I found some code in internet but they do not work for Multilingual, I need to translate also “Read More” and “Read Less” buttons texts based on locale.

So, how can I do?

Thank you in advance

2

Hi @atertonien ,

I checked and you already added it but can’t translate can you send me the code you followed. I will check it.

Or you can follow the instructions: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more

Hope it helps!

1 Like
3

Yes, I saw that guide, thank you.

Do you know if hidden text with this Read More Read Less button may affect SEO?

I have managed to do it this way:

1 ) Activate custom.js from “customize theme”
 
2 ) Add the following code to custom.js file in “theme editor”:
 
function ReadMoreLessEn() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreLessText");
  var btnText = document.getElementById("readmlBtn");
 
  if (dots.style.display === "none") {
	dots.style.display = "inline";
    btnText.innerHTML = "Read more";
	moreText.style.display = "none";
  } else {
	dots.style.display = "none";
	btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
function ReadMoreLessFr() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreLessText");
  var btnText = document.getElementById("readmlBtn");
 
  if (dots.style.display === "none") {
	dots.style.display = "inline";
    btnText.innerHTML = "Lire plus";
	moreText.style.display = "none";
  } else {
	dots.style.display = "none";
	btnText.innerHTML = "Lire moins";
    moreText.style.display = "inline";
  }
}
function ReadMoreLessIt() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreLessText");
  var btnText = document.getElementById("readmlBtn");
 
  if (dots.style.display === "none") {
	dots.style.display = "inline";
    btnText.innerHTML = "Leggi più";
	moreText.style.display = "none";
  } else {
	dots.style.display = "none";
	btnText.innerHTML = "Leggi meno";
    moreText.style.display = "inline";
  }
}
 
3 ) Add the following css code: #moreLessText {display: none;}
 
4 ) Remove all the  or  from your text that needs ReadMoreReadLessButton
 
5) Add this code after the part of text you want to show (must not be between open tags):
 

 
6 ) Add this code at the end of your text:
 
For English
 

 
For French
 

 
For Italian
4

And would it be possible to use something like

{%- if request.locale.iso_code == ‘en’ -%}
btnText.innerHTML = “Read more”;
{%- elsif request.locale.iso_code == ‘fr’ -%}
btnText.innerHTML = “Liere plus”;
{%- elsif request.locale.iso_code == ‘it’ -%}
btnText.innerHTML = “Leggi più”;
{%- endif -%}

for Javascript? I do not know how to use this liquid object with Javascript in order to have only one function and not 3.

Example:

function ReadMoreLessEn() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreLessText");
  var btnText = document.getElementById("readmlBtn");
 
  if (dots.style.display === "none") {
	dots.style.display = "inline";
{%- if request.locale.iso_code == 'en' -%}
    btnText.innerHTML = "Read more";
{%- elsif request.locale.iso_code == 'fr' -%}
    btnText.innerHTML = "Liere plus";
{%- elsif request.locale.iso_code == 'it' -%}
    btnText.innerHTML = "Leggi più";
{%- endif -%}
	moreText.style.display = "none";

  } else {
	dots.style.display = "none";
{%- if request.locale.iso_code == 'en' -%}
    btnText.innerHTML = "Read less";
{%- elsif request.locale.iso_code == 'fr' -%}
    btnText.innerHTML = "Liere moins";
{%- elsif request.locale.iso_code == 'it' -%}
    btnText.innerHTML = "Leggi meno";
{%- endif -%}
        moreText.style.display = "inline";
  }
}
5

And, most importantly, how can I scroll back to the top of the text when someone clicks on “Read less” button?

my preview: https://h26waycsqjlya2fm-55710711987.shopifypreview.com

6

Hi @atertonien ,

I checked and it shows fine. And this has no effect on SEO.

What else do you want me to check?

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.