商品とコレクションをデザイン

このガイドはFy2Press 1.0.0について説明しています。今後のバージョンでは画面が変わることがあるため、手順に進む前に「プラグイン」画面に表示されているバージョンを確認してください。

期待される結果

商品とコレクションの見せ方は、付属のFREEデザイン工房、または提供されたPROの視覚デザイン機能で調整します。商取引に対するShopifyの責任は変わりません。

付属のビジュアル工房、既定テンプレート、提供されたPRO機能を使います。ロックされたプレビューを動作中の機構と取り違えないでください。

開始前の準備

• 画像、長いタイトル、価格、バリエーション、在庫状況を備えた代表的な同期済み商品。
• 把握済みのWordPressテーマと、対象とするページ幅。
• インストール済みのFREEまたはPROパッケージに対応するエディション別機能一覧。
• 広範な変更を加える前の、デザイン設定の復元ポイント。

始める前に、元に戻す手段を用意してください。バックアップまたはステージング環境のコピー、比較に使うShopifyの商品、結果を表示するWordPressのページを決めておきます。まずは繰り返し試せる小さなテストから始めましょう。

このガイドで扱う内容

FREEでは、プレビュー付きの基本的な商品・コレクションの全体設定が利用できます。PROでは、高度なエディター、コンポーネント単位のカスタマイズ、レスポンシブ設定、複数テンプレート、カスタムCSSが加わります。プリセットの保存や設定の書き出し・読み込みはありません。

まず、それぞれの役割を確認しておきましょう。商品、在庫、注文、支払い、チェックアウトはShopifyが管理します。Fy2PressはカタログをWordPressに取り込んで表示します。WordPressにはサイトのページや記事などのコンテンツが置かれます。このガイドの手順で、注文、顧客、支払いがWordPressへ移ることはありません。

手順

1. デザインを開き、変更したい商品またはコレクションの面を選ぶ。
2. 全体設定はごく少数だけ調整し、その後で代表的なカタログデータとプレビューを照合する。
3. PROでは、コンポーネント単位の変更とレスポンシブの変更を分け、差分ごとに確認と取り消しができるようにする。
4. 長い文章、画像の欠落、セール価格、バリエーションの操作、在庫切れの状態をプレビューする。
5. デザインのプレビューだけでなく、実際のWordPressページで検証してから公開する。

ページを一般に公開する前に、結果を確認してください。成功メッセージが出るのは良い兆候ですが、公開ページとShopifyでの購入の流れも一致している必要があります。

結果の確認

• 商品とコレクションの初期状態が、PROの機能なしでも実用に耐える。
• レスポンシブの変更後も、320ピクセルで読み順、フォーカス、購買操作が保たれている。
• ダウングレードしても、保存済みのPRO設定やカタログの内容が削除されない。

結果は、訪問者が実際に目にする場所で確認してください。Fy2Pressの画面だけでなく公開されているWordPressのページを開き、代表的な商品を、価格、在庫状況、バリエーション、コレクションも含めてShopifyと比べます。小さな変更を一度だけ繰り返し、動作が安定していることを確かめてください。

よくある問題

• プレビューとフロントエンドが異なる: 差異の原因がテーマ、ビルダーのレンダラー、保存済みのデザイン設定のどれにあるかを特定する。
• FREEでPROの操作がロックされて見える: 動作中の機能ではなく、商品に関する文脈情報として扱う。
• モバイルでレイアウトが崩れる: 全体の初期値に戻し、コンポーネントとブレークポイントを一つずつ変更し直す。

想定外のことが起きたら、大きな操作をいったん止め、商品1件とページ1つで試し直してください。設定を変更したりキャッシュを削除したりする前に、エラーメッセージを正確に控えておきます。

トラブルシューティング

1. プラグインのバージョンとエディション（FREEまたはPRO）を確認します。
2. テスト用の商品1件で、問題を再現します。
3. 問題の原因がShopify、Fy2Press、WordPressのテーマのどれにあるかを見極めます。
4. エディションのガイドを参照し、ご利用のエディションに含まれる機能と結果を比べます。
5. テスト環境を元に戻してもう一度試し、同じ結果が繰り返されるかを記録します。

セキュリティとデータ

カスタムCSSはPROの公開権限です。信頼できる管理者に限定し、外部からの読み込みを避け、スタイルやテンプレートに資格情報や顧客データを埋め込まないでください。

サポートを依頼するときは、プラグインのバージョン、WordPressとPHPのバージョン、使用しているテーマまたはページビルダー、ページのアドレス、実行した手順を控えておいてください。テスト用の商品を使い、スクリーンショットを共有する前に、トークン、顧客データ、注文の詳細、非公開のアドレスを取り除いてください。

検索への影響

デザインは見出しの順序、テキストの可視性、リンクのラベル、レイアウトの安定性を変えることがあります。テンプレートを変更するたびに、レンダリングされたセマンティック構造、アクセシブルな名前、レイアウトの累積的な挙動を検証してください。

サポートに伝える情報

サポートを依頼するときは、プラグインのバージョン、WordPressとPHPのバージョン、使用しているテーマまたはページビルダー、ページのアドレス、実行した手順を控えておいてください。テスト用の商品を使い、スクリーンショットを共有する前に、トークン、顧客データ、注文の詳細、非公開のアドレスを取り除いてください。

関連ガイド

• インストール
• WordPressで公開する
• GoogleとSEO
• セキュリティとデータ

バージョンと提供状況

Fy2Press 1.0.0のドキュメントです。無料プラグインはWordPress.orgで入手できます。PROは、ライセンスと決済を担当するFreemiusを通じて別途販売しています。