商品一覧ページでタグソートした際にページタイトル下にタグ名を表示させたい

AI-generated summary

Shopifyの「Debut」テーマで、コレクション商品一覧ページを商品タグで絞り込んだ際、ページタイトル下に選択中のタグ名を表示したいという相談です。未選択時は空欄または「すべての商品」と表示し、/collections/all/タグ のようなタグ付きURLで直接アクセスした場合にも反映させたい、という要件が示されました。

回答では、sections/collection-template.liquid 内の見出し表示部分が対象とされ、{{ collection.title }} を {{ current_tags }} に置き換える方法が提案されています。これにより、タグ選択時に見出しがタグ名へ切り替わるとのことです。

補足として、未選択時に空白になるため、current_tags が空の場合は固定文言を表示するLiquidの条件分岐を追加すればよいと案内されています。外部リンク経由のタグ指定URLについても、current_tags に値が入るため動作する可能性が高いとされていますが、この点は未検証です。

Shopify 初心者です。

現在、「Debut」のテーマをカスタマイズしています。

https://themes.shopify.com/themes/debut/styles/default/preview

コレクション商品一覧ページに「FILTER BY」日本語だと「絞り込み方法」がデフォルドで設定してあり、

商品タグのソートとして利用したいと考えているのですが、

商品タグでソートした際に、プルダウンの上のタイトルブロックにタグ名が表示するようにしたいです。

■実現したいこと

  1. 上記添付した画像の、四角で囲った場所でセレクトしたタグ名が、波線引いた「商品」というページタイトルの下に表示させたい。
  2. 絞り込みをかけていないときは、無記入もしくは「すべての商品」という表示でありたいです
  3. また、別ページから、タグでソートした状態のリンクを張っている場合があり、その際にも波線箇所にタグ名が表示されてほしいです。
    https://〇〇.myshopify.com/collections/all/タグ

お手数おかけしますが、出力記述を教えていただけたらと思います。
ご確認どうぞよろしくお願いします。

sections/collection-template.liquid 内の

{{ ‘collections.general.collection_label’ | t }}:
{{ collection.title }}

が該当部分かと思いますので、これを

<select class=“filters-toolbar__input hidden” name=“FilterTags”

あたりを参照して、

{{ collection.title }} を {{ current_tags }} に置換(2箇所)したところ、タグを選択する毎に見出しの部分がタグ名になりました。

これだと未選択だと空白になりますが、その場合は、{{ current_tags }}が空白の場合は固定文字を入れるliquidコードを挿入すればいいと思います。

3は試してないですが、多分外部からリンクできても、{{ current_tags }}に値が入るので動作すると思います。