Select and style the first letter of a paragraph in Shopify

by Kiet Huynh · October 17, 2015

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.

$(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

Related Posts via Categories