選択表示

選択的表示では、さまざまな条件に基づいて要素を表示または非表示にし、独特のレイアウトを作成できます。 フィルター — コレクションリストに表示されるコレクションアイテムを明確にする — 要件はいつ表示されるかを指定する どれでも 要素（静的または動的）が表示されます。 

この授業では以下の内容を取り上げます。

1. 選択的表示の定義 
2. 選択表示を設定する方法
3. 基準ガイドライン
4. フィルターと比較した要件
5. 選択的表示のシナリオ

選択的表示の定義

選択的表示は、特定の条件に基づいて、サイト上で要素がいつ表示可能になるかを決定します。 

たとえば、選択的表示を使用すると、次のことが可能になります。

• コレクション項目フィールドまたは値に基づいて、コレクション リスト内の要素を表示または非表示にします (例: コレクション フィールドの値に応じて要素を表示したり、コレクション フィールドが空の場合にコレクション フィールドに関連付けられた要素を非表示にします) 
• コレクションアイテムのフィールドまたは値に基づいて、ラベルを表示または非表示にしたり、アイテムを強調表示したりします（例：注目のブログ投稿に「注目」ラベルを追加します）
• コレクションページのセクションを表示または非表示にする
• 現在のコレクションアイテムを強調表示します
• ユーザーがサイトにログインしていない場合に要素を表示または非表示にする

各コレクション フィールド タイプには、選択のためのさまざまな条件があります。 

選択表示を設定する方法

ユーザーのログイン ステータスに基づいて要素を表示または非表示にする条件を作成するには: 

1. キャンバス上の要素を選択する
2. 進む 要素設定パネル > 可視性とユーザーアクセス
3. クリック "プラス” 記号 
4. ドロップダウンから可視性を確認したいフィールドを選択します（例：ユーザー状態）
5. 次のドロップダウンから値を選択します（例：ログイン済み）
6. クリック 保存

同じ手順を再現して、フィールドベースおよびアイテムベースの要件を組み込むことができます。 要素設定パネル > 選択表示.

条件は必要な数だけ含めることができます。複数の条件が適用されている場合、要素が表示される（または非表示のままになる）にはすべての基準を満たす必要があります。条件を削除するには、「ごみ要件の隣に「 」記号が表示されます。

基準ガイドライン

基準ガイドラインは、フィルター ルールと同様に、フィールド ベースまたはアイテム ベースのいずれかです。 

フィールドベースの条件は、指定されたフィールドが次の場合に有効になります。 

• 設定されています または 設定されていません
• 等しい または 等しくない 特定の値
• より大きい, 未満、 または は 数 間 2つの数値
• はの上 または オフ
• 特定の日付範囲に属する

コレクションアイテムにはアイテムベースの要件が適用されます は または ではありません 現在のアイテム。 

フィルターと比較した要件

コレクション リスト フィルターを使用すると、ガイドラインに基づいてコレクション リスト内のコレクション アイテムを表示または非表示にできます。一方、選択表示では、同じガイドラインを使用して、コレクション リスト内、コレクション ページ上、または静的ページ上の要素を表示または非表示にします。

たとえば、「注目（スイッチ）がオン」というガイドラインを使用して、注目のブログ投稿に「注目」というテキスト ラベルを表示し、注目スイッチがオフになっている要素のこのラベルを非表示にすることができます。

あるいは、リストにおすすめの投稿だけを表示したい場合は、同じガイドラインを次のように設定できます。 フィルター コレクションリストに表示されます。 

選択的表示のシナリオ

コレクションリスト内およびコレクションページ内

ガイドラインとフィルターを適用して、コレクション リスト内またはコレクション ページで特定のコンテンツを強調したり、表示または非表示にしたりできます。ブログ投稿のコレクション リストがあり、おすすめの投稿に「おすすめ」ラベルを表示するとします。スイッチ フィールドに基づいて選択表示を適用して、「おすすめ」スイッチがオフになっているアイテムのラベルを非表示にすることができます。 

次のガイドラインに従うには、コレクションにスイッチ フィールドを追加し、「注目」ラベルとして機能する要素を作成する必要があります。次に、次の手順を実行します。 

1. キャンバス上の「注目」ラベルを選択します
2. に行く 要素設定パネル > 選択表示
3. クリック "プラス” 記号 
4. ドロップダウンからメールフィールドを選択します
5. 選ぶ 設定されています 次のドロップダウンから
6. クリック 保存

電子商取引サイト

メイン画像、比較価格、SKU などのバリアント フィールドに選択的表示を設定することで、選択的表示を使用して、異なるデザインを固有の製品バリエーションにリンクできます。または、チェックアウト情報に応じてバナーやコールアウトを挿入することもできます。たとえば、カートの合計、小計、または配送情報に基づいて、チェックアウト ページに「送料無料」バッジを表示できます。

チェックアウトページで選択的な表示を実装するには:

1. 特定のガイドラインが満たされたときに表示する要素を選択します
2. 訪問 要素設定パネル > 選択表示
3. クリック "プラス” 記号 
4. ドロップダウンから配送フィールド（例：小計）の1つを選択します
5. ガイドラインを選択してください（例： 等しい または より大きい 特定の値） 
6. 入力フィールドにガイドラインの値を入力します 
7. クリック 保存

その他のシナリオ例: 

• 電子商取引の商品が配送できない場合は、「店舗受け取り」バッジを追加します
• 価格比較フィールドが設定されているかどうかに基づいて販売バッジを表示または非表示にします 
• 特定の国に発送する際に特定のメッセージを表示または非表示にする 

重要： 価格に基づいてガイドラインを設定する場合、ストアの価格フォーマット設定に関係なく、金額は小数点としてピリオドを使用してフォーマットする必要があります (例: 1000.00)。たとえば、100,50 € は 100.50 と入力する必要があります。 

注記： 国または請求先住所に基づいて選択表示を設定する場合は、国を次のように入力する必要があります。 2文字の略語たとえば、米国は「US」と入力する必要があります。

ユーザーアカウントサイト

ユーザー アカウントが有効なサイト上の任意の要素 (ボタン、セクションなど) に選択的な表示を設定することで、ユーザーがログインしているかどうかに基づいてユーザーのエクスペリエンスをカスタマイズできます。サイト訪問者のログイン状態に基づいて要素の表示を設定する方法の詳細をご覧ください。