Liquid Highlight in Shopify: Everything You Need To Know
Drive 20-40% of your revenue with Avada
Wondering how Liquid Highlight works in Shopify? This guide covers everything you need to know to effectively use Liquid Highlight for customizing and enhancing your store’s content.
Additional filters
Highlight
You should take note that the highlight is used to wrap words inside the search results with an HTML <strong> tag, along with the highlight class if it can match search.terms.
Input
{{ item.content | highlight: search.terms }}
Output
<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!
Highlight_active-tag
The highlight_active_tag can wrap tag links in <span>; followed by the class active if those tags are used to get collections filtered.
Input
<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
{% for tag in collection.tags %}
{{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}
Output
<a title="Show products matching tag Cotton" href="/collections/all/cotton"><span class="active">Cotton</span></a>
<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck</a>
<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey</a>
Conclusion
To sum up, Liquid Highlight in Shopify is a powerful tool for improving search results and filtering tags on your store. By using the highlight and highlight_active_tag filters, you can enhance the visibility of search terms and active tags, making navigation easier for customers. Now, apply these steps to improve your Shopify store’s user experience and boost engagement.
Liquid
