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

このガイドは、ページ冒頭に示されたShopiPressのバージョンに適用されます。当該バージョンはFreemiusで正式に公開されています。手順を適用する前にインストール済みバージョンを確認してください。以降のバージョンでは画面、既定値、サービスの境界が変わる場合があります。

期待される結果

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

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

開始前の準備

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

復元ポイントを用意し、根拠となるShopifyのレコードと、結果を裏づけるWordPressのURLまたは管理画面を特定してください。テストは、あいまいなカタログ状態を生まずに繰り返せる程度に小さく保ちます。

対象範囲と現在の制限

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

作業全体を通じて責任分担を明確に保ってください。Shopifyは引き続き商取引の情報源であり決済システムです。ShopiPressは提供された契約に従ってカタログを接続し、同期し、描画します。WordPressは公開の文脈を担います。WordPress側で成功した結果を、注文、顧客、支払い、在庫に関する権限の移転と解釈してはいけません。

手順

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

管理操作と公開の間にある確認の手順を省略しないでください。制御側の成功応答は証跡の一層にすぎません。保存されたWordPressのレコード、レンダリングされたページ、Shopifyの購買経路が一致している必要があります。

結果の確認

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

結果はShopiPressの管理画面だけでなく、レンダリングされたWordPressページと権威あるShopify側の画面の両方で確認してください。価格、在庫状況、バリエーション、コレクションのデータを備えた代表的な商品を使用します。冪等性が問題になる場合は最小限の安全な操作を繰り返し、テストを広げる前に差異を必ず記録してください。

よくある誤り

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

結果が想定と異なる場合は、広範な操作を止め、レコード一件、URL一つ、レンダラー一つにまで問題を絞り込んでください。診断を再現可能に保つため、設定変更やキャッシュ削除の前に失敗した応答を保存します。

トラブルシューティング

1. パッケージのバージョンとエディションを確認する。
2. 管理下のデータで、最小かつ安全な事例を再現する。
3. 失敗している手順の責任がShopify、ShopiPress、WordPressのどれにあるかを特定する。
4. 観測された結果を、提供済み、部分的、未提供のいずれの機能状態と照合する。
5. テスト環境を復元し、一度繰り返して、結果が安定しているかを記録する。

セキュリティとデータ

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

インストール済みバージョン、エディション、WordPressとPHPのバージョン、有効なビルダーまたはSEO連携、正確なURL、ビューポート、そして結果を生んだ操作の順序を記録してください。取得するのは管理下のカタログデータのみとします。成果物が検証環境を離れる前に、Storefrontトークン、顧客データ、注文情報、非公開ドメイン、環境の機密情報を伏せてください。

SEOへの影響

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

記録すべき証跡

インストール済みバージョン、エディション、WordPressとPHPのバージョン、有効なビルダーまたはSEO連携、正確なURL、ビューポート、そして結果を生んだ操作の順序を記録してください。取得するのは管理下のカタログデータのみとします。成果物が検証環境を離れる前に、Storefrontトークン、顧客データ、注文情報、非公開ドメイン、環境の機密情報を伏せてください。

関連ガイド

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

バージョンと製品の状態

ShopiPressはFreemiusで正式に公開されています。このガイドは文書化されたバージョンを説明します。購入およびダウンロードのリンクは、その遷移先が設定され次第、本サイトに追加されます。