テーマの追加、プレビュー、購入

作業を開始しやすいように、Shopifyでアカウントを開設すると、管理画面の[テーマ] ページにデフォルトテーマが設定されています。オンラインストア用に別のテーマをカスタマイズする場合は、管理画面にテーマを追加する必要があります。

テーマは、以下のいずれかの方法で追加できます。

• 自身の言葉でビジネスについて説明し、AIを使用してパーソナライズされた無料テーマを生成することができます。
• Shopifyの管理画面から無料テーマを追加できます。
• Shopify Theme Storeの有料テーマを試すことができます。テーマエディタを使用して、あらゆるテーマをプレビューし、カスタマイズすることができます。オンラインストアにテーマを公開するには、その前にテーマを購入する必要があります。
• コンピューターに ZIP ファイル形式のテーマがすでにある場合は、そのテーマをアップロードできます。

開発者である場合、またはShopify パートナーや代理店と連携している場合は、以下の方法でもストアにテーマを追加できます。

• Shopify GitHub連携を使用して、GitHubでホストされているテーマをストアに追加できます。
• Shopify CLIを使用して、テーマをストアにプッシュできます。

アカウントに複数のテーマを追加して、新しいテーマを試したり、公開済みのテーマの季節限定版を保持したり、公開済みのテーマのコピーに加えた変更をテストしたりすることができます。これらのテーマはどれでもプレビューできますが、一度に公開できるテーマは1つだけです。新しいテーマに切り替えても、Shopifyの[テーマ] ページで古いテーマにアクセスできます。

テーマを追加した後、リンクを作成して、未公開のテーマのプレビューを他の人と共有することができます。この機能は、新しいテーマを公開したりオンラインストアを立ち上げたりする前に、フィードバックを求めたい場合に役立ちます。公開済みのテーマのプレビューは共有できません。

テーマの利用資格要件

ストアまたは組織にテーマを追加するための、以下の利用資格要件を確認してください。

• 追加できるテーマの最大数は、料金プランによって異なります。
• Starter プランのストアでは、Spotlight テーマのみを追加できます。
• Basic、Grow、Advancedの各プランのストアおよび組織では、最大20個のテーマを追加できます。
• Shopify Plus プランのストアおよび組織では、最大100個のテーマを追加できます。

プランのテーマ数の上限に達した場合、新しいテーマを追加するには、いずれかのテーマを削除する必要があります。追加ストアでは、有効な追加ストアごとにテーマライセンスが必要です。

AIを使用して無料テーマを生成する

Shopifyの管理画面にある[テーマ] ページから、AIを使用してパーソナライズされた無料テーマを生成できます。無料テーマのカスタマイズに関するヘルプは、Shopifyのサポート対象です。

Shopifyの管理画面にある[テーマ] ページから、AIを使用してパーソナライズされた無料テーマを生成できます。無料テーマのカスタマイズに関するヘルプは、Shopifyのサポート対象です。

手順：

管理画面から無料テーマを追加する

無料テーマはShopifyによって開発されています。無料テーマのカスタマイズに関するヘルプは、Shopifyのサポート対象です。

無料テーマはShopifyによって開発されています。無料テーマのカスタマイズに関するヘルプは、Shopifyのサポート対象です。

手順：

Shopify Theme Storeの有料テーマを試す

有料テーマは、購入を確定する前に Shopify の管理画面でプレビューして試すことができます。プレビュー中のテーマは、テーマエディタを使用して、ブランドのカラーやスタイル、商品に合わせてカスタマイズできます。テーマを購入すると、加えたカスタマイズはすべて保存されます。

最大19個の有料テーマを同時にプレビューできるため、購入前にさまざまなテーマを比較できます。トライアル中の有料テーマには、**[テーマのトライアル]** ラベルが付いています。

有料テーマのサポートを受けるには、テーマ開発者にお問い合わせください。

手順：

1. Shopify Theme Store にアクセスして、有料テーマを選択します。
2. [テーマを試す] をクリックして、オンラインストアにテーマを追加します。
3. Shopifyの管理画面で、**[オンラインストア]** > **[テーマ]** の順にクリックします。
4. 下書きテーマ セクションで、プレビューするテーマの横にある ボタンをクリックしてアクションメニューを開きます。
5. [プレビュー] をクリックします。

テーマのプレビュー中にテーマ設定をカスタマイズすることができます。テーマが気に入ったら、そのテーマを購入できます。テーマに加えたカスタマイズはすべて保存されます。テーマのトライアル中は、テーマコードを編集したり、AIコードジェネレーターを使用したりすることはできません。

Shopify Theme Storeからテーマを購入する

Shopify Theme Storeからテーマを購入できるのは、以下のストアレベルの権限をすべて持っているユーザーのみです。

• テーマ
• アプリとチャネルを管理・インストールする
• アプリの請求を承認する

オンラインストアで有料テーマを試した後、購入を選択できます。公開できるのは、購入したテーマのみです。Shopify Theme Storeからテーマを購入すると、そのテーマのライセンスは、購入が行われたストアにのみ付与されます。別のストアでテーマを使用したい場合は、そのテーマを移行できる場合があります。

有料テーマは、外部サービスのテーマ開発者によって作成されます。外部サービスのテーマに関する一般的なサポートと更新は、テーマ開発者によって提供されます。HTML、CSS、JavaScript を使用したウェブサイト開発の経験がなく、高度なカスタマイズが必要な場合は、Shopify パートナーに依頼することを検討してください。

手順：

1. Shopifyの管理画面で、[オンラインストア] > [テーマ] の順に移動します。

2. **[テーマを追加する]** > **[Theme Storeにアクセスする]** の順にクリックします。

3. 購入したいテーマを検索し、**[テーマを試す]** をクリックします。

4. 下書きテーマ セクションで、購入するテーマの 購入 をクリックして取引を開始します。

コンピューターからテーマファイルをアップロードする

コンピューターにZIPファイル形式のテーマがある場合、Shopifyの管理画面の**[テーマ]** ページにアップロードできます。

アップロードする前に、テーマファイルが1つのZIPファイルに圧縮されていることを確認してください。

ZIPファイルをアップロードすると、テーマはShopifyの管理画面の**[テーマ]** ページに追加されます。

手順：

テーマの切り替え

ストアに新しいテーマを追加すると、Shopify の テーマ ページの 下書きテーマ セクションに表示されます。新しいテーマは、オンラインストアに 公開する ことで切り替えることができます。新しいテーマを公開しても、古いテーマは引き続き下書きテーマで利用できます (必要に応じて元に戻すこともできます)。

テーマを手動で更新すると、テーマの更新バージョンが別のバージョンとして下書きテーマに表示されます。更新バージョンに切り替えても、古いバージョンのテーマは引き続き下書きテーマで利用できます。詳細については、テーマの更新 を参照してください。

テーマ切り替えの準備

下書きテーマにテーマを追加すると、公開する前にカスタマイズできます。これは、既存のテーマを置き換える前に、新しいテーマを確認し、ビジネスを反映するように設定やコンテンツを調整する良い機会です。また、準備した複数のテーマ間で、再設定することなく切り替えることもできます。

ストアの商品、コレクション、メニュー、ページ、ブログ記事は、テーマとは別に管理画面で管理されるため、新しいテーマに切り替えても変更されたり削除されたりすることはありません。ただし、テーマエディタ、テーマコードエディタ、言語エディタを使用して管理されるコンテンツと設定は、アップロードする各テーマとテーマのバージョンに固有のものです。

オンラインストアの以下の部分はテーマに関連付けられています。使用するテーマごとに、オンラインストアのこれらの部分をカスタマイズする必要があります。

• ストアのセクションとブロックに適用される設定
• オンラインストアに適用される色やフォントを含む、全体的なテーマ設定
• テキストと文言
• アプリによって追加されたコードのカスタマイズを含む、コードのカスタマイズ
• 利用可能なテーマテンプレート

すべてのテーマが、すべてのShopifyの機能に対応しているわけではありません。テーマの機能リストを確認して、必要な機能があることを確認する必要があります。

テーマのプレビュー

オンラインストアの **[テーマ]** セクションで、任意のテーマをプレビューできます。プレビューでは、ブラウザのタブにオンラインストアプレビューバーとともに、プレビュー対象のテーマがオンラインストアに表示されます。

オンラインストアのプレビューバーには、テーマに関する次の情報が表示されます。

• テーマ名。
• テーマのステータス。公開済みのテーマのステータスは [ライブ]、未公開のテーマのステータスは [下書き] です。

次の操作でプレビューをカスタマイズできます。

• [として表示] セクションで、プレビューする別の国や言語を選択できます。海外マーケットやテーマへの言語の追加について、詳しくはこちらをご覧ください。
• テーマのプレビューを共有するには、 ボタンをクリックします。
• 「 プレビューを閉じる 」をクリックすると、プレビューが閉じて公開済みのテーマが表示されます。
  • [テーマを編集] をクリックすると、テーマエディタが開き、テーマをカスタマイズできます。
• プレビューバーの上部付近をクリックすると、バーを折りたたむことができます。もう一度クリックすると展開できます。

テーマのプレビューを他の人と共有する

オンラインストアをもうすぐ公開する場合や、新しいテーマを公開してストアのデザインを変更する予定の場合は、テーマのプレビューを共有することで、他の人からフィードバックを求めることができます。

管理画面に追加したテーマのプレビューに、他の人がアクセスできるリンクを作成できます。共有するテーマは、公開済みである必要はありません。

テーマのプレビューには、2種類あります。

• 訪問者プレビュー：訪問者プレビューは URL があれば誰でも閲覧でき、認証は必要ありません。このプレビューは URL の作成後 2日で有効期限が切れます。訪問者プレビューの URL は、https://<token>-<shop_id>.shopifypreview.com という形式です。
• マーチャントプレビュー：マーチャントプレビューには管理画面の認証が必要で、チェックアウトにアクセスできます。このプレビューは URL の作成後 30日で有効期限が切れます。マーチャントプレビューの URL は、プライマリードメイン形式にトークンパラメーターが付加されたものになります。

テーマの [プレビュー] をクリックすると、ブラウザのアドレスバーにマーチャントプレビューの URL が表示されます。他の人と共有するための訪問者プレビューリンクを作成するには、プレビューバーにある ボタンをクリックします。新しいリンクはいつでも作成でき、新しいリンクを作成しても、以前のプレビューリンクに影響はありません。

手順：

テーマプレビューのトラブルシューティング

テーマのプレビューやプレビューバーが正しく表示されない原因として、さまざまな状況が考えられます。このガイドの手順を確認してもテーマの問題が解決しない場合は、テーマのサポートチームに問い合わせる必要があるかもしれません。テーマのサポートを受ける方法について、詳しくはこちらをご覧ください。

ライブストアにプレビューバーが表示される

これは通常、テーマがオンラインストアの URL に preview_theme_id というパラメーターを誤って追加している場合に発生します。このパラメーターは内部プレビュー専用ですが、ライブ URL に存在する場合、すべての訪問者に対してプレビューバーが強制的に表示されてしまいます。

オンラインストアにアクセスし、ブラウザのアドレスバーに preview_theme_id パラメーターがないか確認してください。また、お客様に、プレビューバーが表示された際のリンクアドレスを転送してもらうこともできます。

オンラインストアの URL に preview_theme_id パラメーターが含まれている場合は、テーマの開発者にサポートを依頼し、問題を説明してください。

テーマコードの編集に慣れている場合は、テーマファイルで preview_theme_id を検索し、それを URL に追加しているコードを削除できます。この種のコードは、layout ファイルや Javascript (末尾が .js) を含むファイルに含まれている可能性が最も高くなります。HTML と CSS に精通し、Shopify のテンプレート言語である Liquid、JSON、Javascript の基本を理解している場合にのみ、テーマのコードを編集してください。

この問題は、Shopify Theme Store 以外で購入したテーマ (ThemeForest の Lumia テーマなど) で報告されています。

下書きテーマのプレビューがライブテーマにリダイレクトされる

未公開のテーマで [プレビュー] をクリックした際にライブテーマにリダイレクトされる場合、その原因はほぼ常に Cloudflare のキャッシュに関連しています。

Shopify ストアの前面で Cloudflare を使用している場合、Shopify のプレビューメカニズムを妨げるキャッシュ設定になっている可能性があります。Shopify もキャッシュに Cloudflare を使用しており、これらのレイヤーが競合することがあります。私たちも、ドキュメントで外部キャッシュとの競合の可能性について言及しています。

プレビューバーが正しく機能するように、Shopify へのすべてのリクエストについて Cloudflare でのキャッシュをオフにしてください。

プレビューバーがまったく表示されない

テーマをプレビューする際にプレビューバーが表示されない場合、カスタムコードまたは外部アプリがテーマのデフォルトスクリプトを変更していることが原因と考えられます。

この問題は、通常、テーマの layout フォルダーにある `theme.liquid` ファイル内の Liquid オブジェクトに影響を与える変更が原因であると考えられます。プレビューバーのスクリプトが正しく読み込まれるには、このオブジェクトが必要です。このオブジェクトを変更すると、スクリプトの読み込みが妨げられ、プレビューバーが表示されなくなるほか、Shopify の機能やアプリで他の問題が発生する可能性があります。

テーマとアプリを確認して、変更の原因を特定できます。テーマのトラブルシューティングを行う方法について、詳しくはこちらをご覧ください。