製品詳細を見る

「製品の詳細表示」要素とは何ですか?

その 製品詳細表示要素 GemPages には、訪問者を製品の詳細ページにリダイレクトする動的なボタンがあります。

これは通常、 商品リスト or 収集 セクションでは、画像やタイトルなどの基本情報のみで複数の商品が表示されます。

「商品の詳細を表示」ボタンを追加すると、買い物客は商品の詳細をはっきりと確認できるようになり、より深く検討して購入する可能性が高まります。

例えば、商品グリッドに商品を並べるとします。各商品カードには、画像、タイトル、価格しか表示されていないかもしれません。「商品詳細を見る」ボタンを追加することで、顧客はクリックするだけで商品の詳細ページに直接アクセスできます。

ページに製品の詳細情報要素を追加するにはどうすればいいですか?

ページに追加するには、以下の手順に従ってください。

ステップ1： 検索バーを使用してこの要素を見つけ、目的の位置にドラッグ アンド ドロップします。

例えば、コレクションページを作成する場合、各商品カードの下にボタンをドロップすることができます。 商品リスト.

ステップ2： 追加されたら、「商品詳細を見る」ボタンをクリックして開きます。 設定パネル 左側のサイドバーに2つのタブが表示されます。 設定 の三脚と 高機能.

設定タブを構成する

1. 製品の供給元

要素がどの製品からの情報を表示しているかを示します。

このボタンは自動的に商品データを取得します Shopify管理者必要な商品情報（タイトル、説明、価格など）がShopifyストアにすでに設定されていることを確認してください。

2. サイズ

調整できます 幅, 高さ, パディング ボタンのサイズです。これらの値はピクセル単位で定義され、ボタンの大きさやコンパクトさを制御できます。

3。 背景

以下から選択してください カラー と 画像の背景 ボタン用。 

4. 形状

このセクションでは、ボタンの全体的なスタイルを制御します。

• ボーダー: 境界線の太さとスタイルを定義します。
• コーナー: 角の半径を調整します。
• Shadow: ボタンの影で奥行きを加えます。

5. アイコン

ボタンにアイコンを追加することも、テキストのみのままにすることもできます。 

追加することを選択した場合:

• アイコン: GemPages の組み込みアイコンから選択するか、独自のカスタム アイコンをアップロードします。
• 役職: アイコンをテキストの左側に表示するか右側に表示するかを決定します。
• ギャップ: テキストとアイコンの間隔を調整します。手動で値を設定するか、スライダーを使用して調整できます。

6. テキスト

下 テキスト セクションで、オンに切り替えると、次の内容を含む全文の設定が展開されます。

• 形式: エディターで事前定義された 6 つの見出しスタイルまたは 3 つの段落スタイルから選択します。
• フォント: ライブラリからフォントを選択するか、 独自のカスタムフォントをアップロードする.
• サイズ: フォントサイズをピクセル単位で設定します。
• 色圏: デザインに合わせてテキストの色を選択します。
• フォントの太さ: テキストの太字の表示を調整します。
• 行の高さ: テキストの行間の垂直間隔を定義します。
• 文字間隔: 個々の文字間の間隔を調整します。
• 最適化の適用: 大文字、小文字、大文字化などのテキスト変換を適用します。
• Shadow: テキストに影を付けて強調します。

7.効果

• ホバー: ボタンにマウスオーバーした際にボタンがどのように変化するかを定義します。ホバー効果の背景色、テキスト色、境界線、角、影を調整できます。

8. リダイレクト先

• 新しいタブ: 商品詳細ページを新しいブラウザタブで開くかどうかを選択します（あり）または現在のタブ（いいえ).

9. 整列

ボタンをコンテナ内に配置します。 左, センターまたは 右.

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.