Select and style the first letter of a paragraph in Shopify
Today, I will guide everyone select and style the first letter of a paragraph in Shopify (blog content, page, product description,..).
We need to combine Shopify liquid code with Javascript code to do this.
Firts, We need get first word in this paragraph. It’s easy with Shopify liquid.
1 | {% assign first_letter = product.description | split:" " | first | strip_html %} |
Next, We will add class for this word. Still will be Shopify liquid.
1 | {% assign new_first_letter = first_letter | append: '</span>' | prepend : '<span class="first-word">' %} |
Next, We will change the new word into this paragraph.
1 | {{ product.description | replace_first: first_letter,new_first_letter }} |
Finished the code with Shopify. Next, We will use Javascript code.
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function(){ //Retrive first word by Class var first_word = $('.first-word').text(); //Retrive first letter var first_letter = first_word.charAt(0); //Add class for first letter var new_first_word = first_word.replace(first_letter,'<span class="first-letter">'+first_letter+'</span>'); //Put new word into the paragraph $('.first-word').html(new_first_word); }); |
Now, with Class you added into this word and this first letter you can edit CSS code for them.
Done! Good luck
Hi, where should I put these liquid codes? thanks