I design .

I'm Ketan ‐ A Melbourne web designer, developer and illustrator with 20 years industry experience.

Liquid tip: Drop cap the first letter of an article

3 October 2021 CSS Liquid Shopify

Drop caps have been used in printed media for a long time to add styling to the first letter of the first paragraph of piece of content.

There are many ways to add this effect to web page content - Javascript, the CSS pseudo :first-letter (which is not fully supported yet), but here’s a simple method using Liquid and basic CSS.

{% assign first_word = article.content | split: ' ' | first %}
{% assign first_letter = first_word | slice: 0 %}
{% capture first_letter_tag %}<span class="dropcap">{{ first_letter }}</span>{% endcapture %}
{% assign first_word_dropcap = first_word | replace_first: first_letter, first_letter_tag %}

<p>{{ article.content | replace_first: first_word, first_word_dropcap }}</p>

You can then style span.dropcap as you see fit.