製品画像要素

商品画像要素について

製品モジュールの一部である製品画像要素を使用すると、Shopify 管理画面から特定の製品の画像を直接表示できます。

この要素の特徴は次のとおりです。

• 注目の画像： メイン画像は、あなたのメディアセクションの最初の画像から取得されます。 Shopify管理者 > 製品.
• 画像リスト: 同じメディア セクションからの画像コレクションが、ビジュアル ギャラリーとして表示されます。

製品画像要素を使用するには、Shopify 管理画面のメディアセクションに画像付きの製品があることを確認してください。

ページに商品画像要素を追加する方法

注意： 適切に機能させるには、 製品画像要素 配置すべき 製品モジュール内.

ステップ1： アクセス GemPagesダッシュボード > ページをクリックし、対象のページをクリックしてエディターを開きます。

ステップ2： ページに製品モジュールがない場合は、ドラッグアンドドロップしてください a 製品要素 ご希望の位置へ。

製品要素には、 製品画像要素.

ステップ3： A署名する 要素への積 製品ソース のセクションから無料でダウンロードできます。

参照する この記事 詳細については 製品の割り当て GemPages で。

ステップ4： メイン画像をクリックすると製品画像要素にアクセスできます

設定タブを構成する

レイアウト

GemPages では現在、注目の画像と画像リストの両方を効果的に表示できるように、事前に設計された 9 つのレイアウトを提供しています。

製品ソース

製品モジュールの製品を選択するには、次の 2 つの方法があります。 割り当てられた製品別に表示 or 手動で選択.

• 割り当てられた製品別に表示

割り当てられた製品別に表示するオプションを選択すると、現在のテンプレートが割り当てられたすべての製品に動的に適用されます。製品はランダムに選択され、現在のエディター ページに表示されます。

現在の製品ソースにマウスを移動し、 edit アイコンを開く 製品を選択してください ダイアログが表示されます。そこから、割り当てられている他の利用可能な製品を選択できます。

• 手動で選択

このオプションを使用すると、同じテンプレートと特定のバリアント オプションに複数の製品モジュールを表示できます。 

選択するには、 手動で選択すると、選択できる製品リストを表示するウィンドウが開きます。 

注目の画像

注目の画像は、商品の主な視覚的表現として機能します。 

このセクションの内容は次のとおりです。

画像一覧

このセクションでは、追加の製品画像 (サムネイル) を注目画像の下または横にどのように表示するかを制御できます。

設定：

アイテム間隔

表示条件

下 表示条件 セクションでは、ドロップダウンからデフォルトの画像アイテムの条件を選択できます。

LCPを最適化する

訪問者がページにアクセスした際に画像を事前に読み込みたい場合は、 あり このセクションについて。

整列

このパラメータを使用すると、ページ上で画像をどのように配置するかを決定できます。選択できるオプションは、左揃え、中央揃え、右揃えの 3 つです。

詳細タブを設定する

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

製品画像要素に関するよくある質問

1. なぜ商品画像がページに表示されないのですか？

製品画像が表示されない場合は、次の原因が考えられます。

• 製品画像要素が製品モジュール内に配置されていません。
• 製品モジュールに割り当てられた製品に、Shopify 管理画面のメディア コンテンツがありません。

チェック この記事 詳細なトラブルシューティングについては、こちらをご覧ください。

2. 製品画像の読み込みが遅いのはなぜですか?

読み込みが遅い原因としては以下が考えられます:

• 高解像度の画像は Web 用に最適化されていません。
• 遅延読み込みを行わずに一度に読み込まれる画像が多すぎます。

参照する このガイド 画像速度を最適化します。

3. 製品以外のページでも製品画像要素を使用できますか?

はい。商品画像要素は、 製品モジュール.

4. GemPages 内で画像の順序を変更できますか?

いいえ。画像の順序はShopify管理画面の商品メディアセクションから取得されます。表示順序を変更するには、Shopify内でメディアを並べ替える必要があります。

5. 製品画像要素にビデオを追加できますか?

• に行く 製品 Shopify管理画面で。
• ビデオを追加する製品を選択します。
• メディアの方 セクションで、 + ボタンをクリックしてビデオをアップロードします。
• 詳しくはこちら Save 変更を適用します。
• GemPagesの商品ページに戻り、クリックします。 同期動画は 製品イメージ 要素。

6. 特定の商品をその画像とともにページに表示するにはどうすればよいですか?

ステップ1： ドラッグ 製品モジュール レイアウトに組み込みます。

ステップ2： 次のいずれかの方法で、製品をモジュールに割り当てます。

• 割り当てられた製品別に表示: 現在のテンプレートを、割り当てられたすべての製品に動的に適用します。
• 手動で選択: Shopify カタログから製品を 1 つ直接選択します。

ステップ3： 製品が割り当てられると、 製品イメージ モジュール内の要素は、Shopify 管理画面から商品の画像を自動的に取得して表示します。

詳細については、以下を参照してください。 この記事.

7. なぜ私の商品画像がShopifyの商品情報と同期しないのですか？

製品画像要素は、製品モジュール内にあり、製品が割り当てられている場合にのみ、画像を動的に読み込みます。

商品写真が更新されない場合は、Shopifyで商品にメディアがあることを確認し、 同期 GemPages で、表示条件が利用可能なメディア (例: 1 番目の画像、1 番目のバリアント) と一致していることを確認します。

8. 商品画像のスライドショーを作成する方法は？

あなたが作成したい場合 カスタム画像スライドショー 各画像を手動で制御できる場所では、 カルーセル要素 の三脚と 画像要素.

カスタム商品画像スライドショーで画像を作成および変更するには、以下の手順に従ってください。

ステップ1： GemPagesエディタで、 カルーセル要素 商品画像スライダーをページ上の表示したい位置に移動してください。

ステップ2： カルーセル内で、 画像要素 スライダーに入力してください。

ステップ3： 画像要素を選択し、商品画像をアップロードしてください。

ステップ4： カルーセル内の残りのスライドについても、同じ手順を繰り返してください。

• 追加する 画像要素 各スライドへ
• 表示したい商品画像をアップロードしてください
• スライドを希望の順序に並べ替えてください

ステップ5： 既存の画像を後から変更するには、スライド内の「画像」要素を選択し、新しい画像をアップロードして古い画像と置き換えるだけです。