カラースウォッチを設定するにはどうすればよいですか?

カラー見本を有効にするたびに、コンセプトテーマでは、カラー見本を表示するための 2 つのオプション (カスタム イメージとバリアント イメージ)を提供します。

この記事をより簡単に理解するために、以下の表を確認してください。

色見本表示
色見本を無効にするカスタムイメージバリエーション画像

このページでは

  1. この機能はどこにありますか?
  2. どのように機能するのでしょうか?
  3. スウォッチ ファイルに名前を付ける
  4. Shopify 管理画面の「ファイル」オプションはどこにありますか?

1. この機能はどこにありますか?

ページの[配色]オプションを調整するには、次のように設定します。

  • テーマ エディターを介して製品ページで、製品情報セクションの下にあるバリアント ピッカーブロックを選択します。

  • [カラー見本] > [見本タイプ]には、 [バリアント イメージ]と[カスタム イメージ] の2 つのオプションがあります。

2. 仕組みは?

まず、色見本の設定を有効にし、表示する色見本またはバリアント イメージを選択します。

2.1 色見本

[構成] ボックスを設定して、色見本を構成します。この機能がどのように機能するかについては、次のルールを参照してください。

  1. この機能を有効にすると、 Concept は、製品のカラー バリエーションの名前と一致する色の値をテーマ設定>カラー見本>構成ボックスで検索します。

  2. 色の値が見つかった場合は、その値を使用して色見本が表示されます。

      • 例 1 - HEX コードの使用: [設定] ボックスには次の値が含まれています: Black:#3a3a3a

        次に、黒の色見本は、デフォルトの黒色 #000000 の代わりに色 #3a3a3a を使用して表示されます。

      • 例 2 - アップロードされたファイルの使用: [構成] ボックスには次の値が含まれています: Crimson Shadow:crimson-shadow.webp

        次に、クリムゾンシャドウの色見本は、Shopify 管理者ダッシュボード/コンテンツ/ファイルにアップロードされたcrimson-shadow.webpという名前の画像を使用して表示されます。

  3. カラー値が[構成] ボックスに見つからない場合は、カラー バリエーションと同じ名前の*.pngファイルを探します。

    例: この場合、この機能は色見本としてcrimson-shadow.pngという名前の*.pngファイルを使用します。

  4. *.pngファイルが見つからない場合は、カラー バリエーションのCSS カラー名を使用して色見本を表示します。

    例: カラー バリエーション「ブラック」の値が見つからない場合、カラー見本にはデフォルトの黒色#000000が表示されます。

  5. 設定ボックス、 PNG ファイル、または16 進コードに色の値が設定されていない場合、色見本は空白になります。

    例:栗の色には値、png ファイルまたは HEX コードがないため、色見本は空白になります。

2.2 バリアント画像

カラー見本設定を有効にすると、Concept は「Color」または「Colour」という名前を持つバリアント カテゴリを検索します。

単語を「色/カラー」以外 (フランス語の Couleur など)に変更するには、言語領域の[テーマ] メニュー> [デフォルトのテーマ コンテンツの編集] で変更できます。

検索バーにcolor_swatch_triggerと入力して、[カラー見本トリガー] 設定を見つけます。

テーマは、使用したバリアント名を調べます。この場合は次のようになります。

  • ゴールドトーン
  • ブラック
  • チェスナット
  • ネイビー
  • クリムゾンシャドウ

    • そして、まったく同じ名前のHTML color nameまたは[製品] > [バリエーション] > [バリエーション画像の更新]でchosen imageを探します。

    ゴールドトーン
    黒
    栗
    海軍
    クリムゾンシャドウ

    3. スウォッチ ファイルに名前を付ける

    • たとえば、 Black 、 Chestnut 、またはNavyスウォッチには、 black.png 、 chestnut.png 、またはnavy.pngという名前を付ける必要があります (大文字は小文字になります)。
    • Gold ToneとCrimson Shadowスウォッチには、 golde-tone.pngおよびcrimson-shadow.pngという名前を付ける必要があります (大文字は小文字になり、スペースやその他の特殊文字はハイフンになります)。

    4. Shopify 管理画面の「ファイル」オプションはどこにありますか?

      • まず、 Shopify 管理画面を開きます。
      • Contentに移動し、 Filesオプションを選択して開きます。クリックファイルをアップロードする.pngスウォッチ ファイルのアップロードを開始します。
    {{ タイトル }} に戻る