商品一覧の商品グリッド内の絞り込み機能の下に「SALE商品のみ表示」を設置したい

[mongorian346]

【目的】

「セール商品のみ表示」のチェックボックスだけ目立たせて設置したい。

Shopify Search & Discoveryの絞り込み機能として使用したい。

【準備】

Shopify Search & Discoveryをオンにし、下記コードをmain-collection-product-grid.liquid内に設置。

<li class="list-menu__item facets__item">
<label for="Filter-filter.p.tag-15" class="facets__label facet-checkbox">
<input type="checkbox" name="filter.p.tag" value="Filter-filter.p.tag-15" id="filfil">
<svg width="1.6rem" height="1.6rem" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<rect width="16" height="16" stroke="currentColor" fill="none" stroke-width="1"></rect>
</svg>
<svg aria-hidden="true" class="icon icon-checkmark" width="1.1rem" height="0.7rem" viewBox="0 0 11 7" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="facet-checkbox__text-label"><font color="#F05F60"><strong>SALE商品</strong></font>のみ表示</span>
<span class="visually-hidden"></span>
</label>
</li>

【結果】

設置できたが、

・チェックボックスがうまく機能しない。

・Filter-filter.p.tag-15取得するようにしてるので、ページによって対象「セール」が取得できない

チェクボックスを設置し、セール品のみを表示できるようにできたらいいのですが、何か良い方法はありますでしょうか？