製品カスタムフィールド要素

製品カスタム フィールド要素とは何ですか?

その 製品カスタムフィールド要素 は、顧客が商品を購入する際に、追加情報を取得できる柔軟なツールです。ニーズに応じて、テキストボックス、チェックボックス、ドロップダウン、ラジオボタンなど、さまざまなタイプのフィールドを表示し、特定の情報を収集できます。

例としては以下の通りです：

• パーソナライズされたメモを収集したり、テキストを彫刻したりします。
• 顧客に配送指示を尋ねます。
• カスタマイズの選択肢（色、サイズ、パッケージ）を提供します。
• Shopify のデフォルトの製品オプションでカバーされていない情報を取得します。

商品カスタムフィールドを通じて収集されたすべてのデータは注文に添付され、 Shopify管理 > 注文 注文が確定次第発送いたします。

商品カスタムフィールドを追加する方法

注意： から 製品カスタムフィールド の子要素です 製品モジュール正しく動作させるには、常に Product モジュール内に配置する必要があります。

次の手順に従います。

ステップ 1： の中に GemPagesダッシュボード、作業するページを選択してエディターに入ります。

ステップ 2: 持っていない場合 製品モジュールページにドラッグ アンド ドロップします。

ステップ 3: 製品モジュール内のカスタム フィールド要素を、任意の場所にドラッグ アンド ドロップします。

追加したら、要素をクリックして開きます。 設定パネル 左側のサイドバーにあります。このパネルには2つのタブがあります。 設定 の三脚と 高機能:

設定タブを構成する

1。 タイプ

入力スタイルを選択します。以下から選択できます。

• テキスト: 短いメモを 1 行で入力できます。
• テキスト領域: 長いコメント用の複数行ボックス。
• メールアドレス: 電子メール アドレス用にフォーマットされた入力フィールド。
• チェックボックス: 顧客が複数の選択肢を選択できるようにします。
• ラジオボタン: 顧客はグループから 1 つのオプションのみ選択できます。
• 落ちます: 単一選択オプション用のコンパクトな選択ボックス。
• 隠されました: 顧客には表示されませんが、注文とともに事前定義された値が送信されます。

2. 製品の供給元

カスタムフィールドが属する製品を表示します。変更するには、 製品ピッカー 製品モジュール内。

3. オプション管理

以下のために利用可能 チェックボックス、ラジオボタン、ドロップダウン 種類。ここでは次のことができます。

• オプションを追加または削除します。
• オプションのラベルを編集します。
• 選択肢を並べ替えて表示順序を制御します。

4。 サイズ

（隠しタイプには使用できません）

• 幅： デフォルトでは、フィールドはコンテナの100%を占めます。 コンテンツに合わせる（自動） 必要に応じて。
• 高さ： デフォルトは自動です。入力フィールドを高くしたい場合は調整してください。
• アイコンとテキストのギャップ: チェックボックスまたはラジオ レイアウトのアイコンとテキスト間の間隔を制御します。

5。 背景

（隠しタイプには使用できません）
入力フィールドの背景色またはパターンを設定します。

6。 シェイプ

（隠しタイプには使用できません）
これらの設定は、入力フィールドの全体的な形状とスタイルを制御します。

• 境界： 境界線の太さ、スタイル (実線、破線、点線)、および色を調整します。
• コーナー： 境界の半径を設定します。
• 影： ドロップ シャドウを適用して奥行きを追加し、フィールドを目立たせます。

7. 入力テキストスタイル

以下のために利用可能 テキスト、テキストエリア、メール 種類。オプションには以下が含まれます。

• プレースホルダー: 入力前に表示されるデフォルトのテキスト。
• フォント： 利用可能なフォントから選択するか、カスタム フォントを適用します。
• サイズ、色、重量: 読みやすさとブランド化のために書体を調整します。
• 行の高さと文字間隔: テキスト間隔を微調整します。
• テキスト変換: テキストを大文字、小文字、または大文字に変換します。

チェックボックス、ラジオボタン、ドロップダウン フィールドの場合、このセクションではオプション ラベルをカスタマイズします。

8。 ラベル

（隠しタイプには使用できません）
フィールドラベルの表示/非表示を切り替えます。以下の項目をカスタマイズできます。

• コンテンツテキスト。
• フォント、サイズ、色、太さ。
• 間隔とテキストの変換。

9. ホバー効果

マウスをホバーしたときのフィールドの外観を制御します。

• 背景色。
• テキストの色。
• 境界線のスタイル。
• コーナーの半径。
• 影。

10. フォーカス効果

フィールドがアクティブまたは選択されているときのスタイルをカスタマイズします。

• バックグラウンド。
• テキストの色。
• 国境。
• コーナーの半径。
• 風邪。

11。 コンフィギュレーション

• フィールド名: バックエンド参照用の識別子を割り当てます。
• 必須: ユーザーがこの情報をバイパスできないようにするには、このスイッチを有効にします。
• 数字のみ: 数字の入力のみを許可するには、この選択を有効にします。
• 最小/最大文字数: スライダーを使用して、必要に応じて最小および最大許容文字数を調整します。

12. エラーメッセージ

無効な入力や必須フィールドの欠落に対するカスタム エラー メッセージを入力します。

コンテナー内でフィールドを左、中央、または右に揃えます。

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.