Skip to main content

Liquid Highlight in Shopify

Last updated: October 07 2024

Written and researched by experts at Avada Learn more about our methodology

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.

linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.