Liquid Highlight in Shopify

Filters in Shopify are known as one of the simplest methods to change the output of strings, numbers, objects, and variables. In fact, filters are put in an output tag {{ }} and devoted by a pipe character |.

Additional Filters in Shopify are also general filters that can serve lots of various purposes, containing converting, formatting, and applying CSS classes. Additional Filters is packed with date, default, format_address, highlight, json, placeholder_svg_tag, and weight_with_unit

In this post, you will be introduced on highlight in Shopify.

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

After reading this review, we hope that you can have an understanding about additional filters in general and highlight in particularly in Shopify.

Recommend for you
Image Description
SEO Suite [FREE]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Proofo - Social Proof [FREE]

Use Social proof to boost sales

Learn more
Image Description
Size Chart [FREE]

Stunning size guide for great shopping experience

Learn more
Image Description
Free Shipping Bar [FREE]

Increase customers’ shopping cart size with free shipping offer

Learn more

Comments for Liquid Highlight in Shopify



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up