Shopifyの検索・フィルタリング機能を拡張できる便利なアプリ「Smart Filter & Search」ですが、導入時に一点注意が必要な仕様があります。

1. 商品一覧の描画プロセスの変化

このアプリを有効にすると、コレクションページの商品一覧がアプリ独自のJavaScriptによって動的に上書きされます。そのため、通常使用される snippets/product-item.liquid のコードが読み込まれなくなります。

2. 独自のHTMLを反映させる方法

独自のデザインを適用したい場合は、専用のテンプレートファイルを作成する必要があります。

作成ファイル: snippets/globo.filter.product.liquid

必須設定: theme.liquid の 直前に、以下のコードを記述してテンプレートを読み込ませます。

{%- capture productTemplate -%}{% render ‘globo.filter.product’, themeTranslation: shop.metafields.globoFilter.themeTranslation.value[request.locale.iso_code] %}{%- endcapture -%}{%- unless productTemplate contains ‘Liquid error’ -%}{%- endunless -%}

3. 使用可能な変数の制限

globo.filter.product.liquid 内で使用できる変数は、以下のものに限定されています。

• product.available
• product.collections
• product.compare_at_price
• product.description
• product.featured_image
• product.first_available_variant
• product.handle
• product.id
• product.images
• product.options
• product.price
• product.price_max
• product.price_min
• product.price_varies
• product.tags
• product.template_suffix
• product.title
• product.product_type
• product.url
• product.variants
• product.vendor

（※その他の標準的なLiquid変数は取得できないため注意が必要です）

Smart Filter & Searchの導入やカスタマイズでお困りの際は、お気軽にご相談ください。