Concept は、コレクション ページまたは注目のコレクション セクションに表示される製品カードへのカスタム ラベルの追加をサポートしています。
各製品は 1 つ以上のカスタム ラベルで装飾でき、すべてカスタマイズ可能な背景色を共有します。この機能はメタフィールドを利用するため、メタフィールド定義を追加し、目的の製品にラベルを割り当てるだけです。
このページでは
新しいメタフィールド定義の追加
場合によっては、ケースバイケースで製品情報を表示する必要がある場合があります。 Conceptテーマの動的ソース機能を使用すると、メタフィールドを使用してカスタマイズされた製品情報を作成でき、独自の製品仕様に多用途のソリューションを提供できます。
このガイドでは、テーマのカスタマイズの可能性を最大限に引き出すための動的なソースとメタフィールドの活用について詳しく説明します。
このページでは
新しいメタフィールド定義の追加
必須前提条件:標準またはカスタムのメタフィールドを適用する前に、メタフィールド定義の追加に関する Shopify のガイドを必ず確認してください。
注記：
この手順は 1 回だけ実行する必要があり、すべての製品に影響します。すでにこれを行っている場合はスキップしてください。メタフィールドはテーマとは独立して機能するため、テーマを更新または再インストールするときにこの手順を再度実行する必要もありません。
「製品特性」メタフィールドを追加するには、次の手順に従います。
Shopify 管理者ダッシュボード> [設定] > [カスタムデータ] 。
新しいフィールドを追加するストアの部分を選択します。たとえば、新しいフィールドをProductsに追加します。
製品を選択した後、右上隅にある「定義の追加」ボタンをクリックします。
[製品メタフィールド定義の追加] ボックスで、次のような新しいメタフィールドの詳細を設定します。
- 名前-
Product label - 名前空間とキー-
theme.label - 説明(オプション) - 「製品を説明する重要な情報を追加します。」という説明行を追加します。
- コンテンツ タイプの選択- 行テキスト、整数、日付と時刻、ファイルなど、さまざまなコンテンツ タイプがあります。この設定では、 Text を選択します。
- [単一行テキスト]を選択し、 [値のリスト]を選択します。値のリストを使用すると、製品に複数のラベルを追加できます。
- 名前-
- 「保存」をクリックして定義を保存します。
これまでに、定義のリストにProduct ラベルが表示されているはずです。
ここで、ラベルの背景色を保存するための別の定義を追加する必要があります。もう一度「定義の追加」をクリックします。
[製品メタフィールド定義の追加] ボックスで、次のような新しいメタフィールドの詳細を設定します。
- 名前-
Product label color - 名前空間とキー-
theme.label_color - コンテンツ タイプを選択し、 [カラー]を選択します。
- 名前-
「保存」をクリックして定義を保存します。
これで、定義リストに製品ラベルの色が表示されるはずです。
動的ソースを接続して製品にメタフィールド値を割り当てる
管理者の[製品]内で、ラベルを追加する製品をクリックします。
[メタフィールド]まで下にスクロールし、 [すべて表示]をクリックして製品のメタフィールド値を開きます。
ここに製品ラベルと製品ラベルの色が表示されます。
ラベルの背景色を設定するには、 「製品ラベルの色」フィールドをクリックして、希望の色を選択します。
注記：
ラベルのテキストは常に真っ白です (16 進コード
#ffffff)。したがって、読みやすくするために白と対照的な色を選択することをお勧めします。
ラベルを設定するには、 「製品ラベル」フィールドをクリックします。デフォルトのテキストボックスにラベルを入力します。たとえば、以下のスクリーンショットでは、「New」が私のラベルです。複数のラベルを追加する場合は、 [項目の追加]をクリックして別のテキスト ボックスを追加し、必要な値を入力します。
「保存」をクリックして変更を保存します。
これらのセットアップを完了すると、「Flow Harmony Liz」製品は自動的にホットラベルを獲得し、注目セクション内での可視性が高まります (以下を参照)。
この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。
Share:
店頭フィルタリングを追加する
コレクションページでのスクロールテキスト背景アニメーションの設定