Dynamic Filtering In Embedcodes on Shopify

The Clerk.io Filters can be used directly in the embed codes using the data-filter attribute. This allows you to make dynamic filters in the logic based on variables in the webshop.

Below you’ll find a few examples, but you can use this in many other ways.

Example 1: Display products of a specific type or brand

You can filter sliders to only show products from within the same type or from the same brand/manufacturer .

In this case you need to use Shopify’s logic for fetching the type. This is usually ’{%raw%}{{ product.type }}{%endraw%}’

Remember: Its important to add single quotes around the variable:

<span class="clerk"
      data-template="@type-slider"
      data-filter="type = '{%raw%}{{ product.type }}{%endraw%}'">
</span>

Example 2: Display products that causes a free shipping limit to be reached:

Assuming you shop has a variable called {{ order.shipping_limit }} that contains the remaining amount needed for the customer to reach the free shipping limit, you can use a dynamic filter that looks like this, to only display products above this price point:

<span class="clerk"
      data-template="@complementary-to-basket"
      data-filter="price > {%raw%}{{ order.shipping_limit }}{%endraw%}">
</span>