Liquid Highlight in Shopify
Last updated: October 07 2024
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.