Shopifyプラグイン用の商品およびコレクションの表示に関する高度なカスタマイズ

これらの高度な設定は、WordPressでストアフロントをカスタマイズし、ビジネスブランドをパーソナライズして、お客様の購入体験を向上させるのに役立ちます。

ShopifyプラグインとShopifyストアフロントコンポーネント

Shopifyプラグインは、Shopify Storefront Web Componentsで構築されています。以下のコンポーネントが、Shopifyストアフロントの構成要素として使用されます。

• 商品カードコンポーネント：このコンポーネントは、通常は商品リストやコレクションページに表示される個別の商品情報を表示します。多くの場合、商品画像、タイトル、価格、[カートに追加] ボタンなどの要素が含まれます。
• 商品クイックビューモーダルコンポーネント：このコンポーネントは、商品詳細、[カートに追加] ボタン、および商品の詳細全体を表示するためのリンクを含むモーダルを既存のコンテンツの上に表示します。
• 商品詳細ページコンポーネント：このコンポーネントは、商品のすべての詳細情報とともに1つの商品を表示します。各商品詳細ページコンポーネントには、固有のURLがあります。
• コレクションコンポーネント：このコンポーネントは、作成した商品のコレクションを表示します。

Shopifyの商品とコレクションの表示のカスタマイズ

プラグインのデフォルトのShopifyストアフロントコンポーネントには、スムーズなショッピング体験を生み出すのに役立つツールがあります。また、特定のブランドアイデンティティやデザイン要件に合わせてこれらのコンポーネントの表示をカスタマイズする柔軟性もあります。

このようなカスタマイズを行うには、WordPressテーマのファイルとディレクトリを変更するアクセス権が必要です。このプロセスでは、有効なWordPressテーマのディレクトリ内に専用のフォルダーを作成します。

手順：

1. Shopify フォルダーを作成する：まず、有効なテーマのディレクトリ内に直接 Shopify という名前の新しいフォルダーを作成します。このフォルダーは、カスタムコンポーネントの上書き用の一元的な場所として機能します。
2. 個々のコンポーネントを上書きする：特定のコンポーネントを変更するには、新しく作成した Shopify フォルダー内に、指定された名前のPHPファイルを追加します。プラグインがカスタムバージョンを認識して適用するには、これらの上書きファイルの命名規則が重要です。
   • 商品カードコンポーネントを上書きするには、Shopify フォルダー内に product-card.php という名前のPHPファイルを作成します。
   • 商品クイックビューモーダルコンポーネントを上書きするには、Shopify フォルダー内に modal.php という名前のPHPファイルを作成します。
   • 商品詳細ページコンポーネントをオーバーライドするには、Shopify フォルダ内に pdp.php という名前の PHP ファイルを作成します。
   • コレクションコンポーネントをオーバーライドするには、Shopify フォルダ内に component.php という名前の PHP ファイルを作成します。

カスタム PHP ファイルを作成すると、プラグインはその特定の要素についてデフォルトのコンポーネントファイルを無視します。これらのオーバーライドファイル内には、静的な HTML ブロックから複雑な PHP ロジックまで、あらゆるコードを実装できます。

一貫性を保ち、Shopify の組み込み機能にアクセスするために、(デフォルトのプラグイン構造で利用されている) Shopify ストアフロントウェブコンポーネントを活用することを強く推奨しますが、これに限定されるわけではありません。商品やコレクションのデータを取得して表示するための他の方法を統合して、高度なカスタマイズを行うことができます。

詳細情報とベストプラクティスについては、WordPress プラグイン開発者向けドキュメントを参照してください。

Shopify の商品とコレクションの書き換え

Shopify で商品またはコレクションを公開すると、それぞれに固有の URL が設定されます。デフォルトでは、これらの URL は Shopify ドメインで作成されます。書き換え機能を使用すると、公開されている WordPress ドメインでそれらの固有の URL にアクセスできるようになります。

手順：

1. Shopify プラグインから、[設定] に移動します。
2. [高度な設定] タブの [Shopify リンクの書き換え] セクションで、2 つのチェックボックスが有効になっていることを確認します。
3. [パーマリンク] に移動します。
4. [保存] をクリックして、この新しいルールを適用します。
5. Shopify の管理画面に移動し、WordPress リンクを作成する商品またはコレクションの詳細ページに移動します。
6. 検索エンジンのリスティングカードに、お客様を商品またはコレクションに直接リンクさせる URL が表示されます。例：https://johns-apparel.myshopify.com › products › huskee-reusable-cup。
7. WordPress サイトの URL の末尾に products/huskee-reusable-cup を追加します。例：https://johns-apparel-wordpress.com/products/huskee-reusable-cup。

商品カードの動作をカスタマイズする

Shopify ストアフロントコンポーネントには、2 種類の商品詳細カードタイプがあります。

1. クイックビュー：商品カードにカーソルを合わせると、お客様は [クイック Shop] オプションを選択できます。クリックすると、バックグラウンドの既存コンテンツの上にポップアップまたはモーダルスタイルで商品の詳細が表示されます。
2. 商品詳細ページ：お客様が画像や商品名などの商品カードをクリックすると、固有の URL を持つ全ページ表示で商品の詳細が表示されます。

この設定を変更して、クイックビューのみ、商品詳細ページのみ、またはその両方を表示することができます。

手順：

1. WordPress の Shopify プラグインで、[設定] に移動します。
2. [高度な設定] タブから、[商品ビュー] セクションに移動します。
3. ストアに最適なオプションを選択します。
4. [保存] をクリックします。