Shopifyへの設置方法

STEP 01

Studioで埋め込みコードをコピーする

表示したいコレクションを選び、あなたのコレクション専用のコードを用意します。

1. Studioにログインし、左メニューの「コレクション」から、設置するコレクションを開きます。
2. 「埋め込みコード」タブを開き、コード欄の右上にある「コピー」を押します。
3. このタブは開いたままにしておきます。次の作業ではShopifyの管理画面を別のタブで使います。

表示には、公開中のコレクション・ストーリーと、公開中かつ公開日時を迎えたメディアが1件以上必要です。まだコンテンツがない場合は、先にStudioで用意します。

STEP 02

ShopifyのストアURLを確認する

お客様がショップを見るときのアドレスを確認します。Shopifyの管理画面のURLとは別のものです。

1. Shopify管理画面の左下にある「設定」を開き、設定メニューの「ドメイン」を選びます。
2. オンラインストアの「プライマリー」と表示されているドメインを確認します。独自ドメインを設定している場合は、そのドメインを使います。
3. 確認したドメインの前に「https://」を付けます。URLの末尾に「/」や、ページのパス・「?」以降の文字を付けません。

画像のアドレスはサンプルです。あなたのストアのドメインに置き換えます。ドメインの購入や変更は、この作業には必要ありません。

STEP 03

Studioの許可ドメインに登録する

Storismに「このショップでウィジェットを表示してよい」と設定します。

1. Studioに戻り、左メニューの「設定」→「会社」を開きます。
2. 「許可ドメイン」の「ドメインを追加」を押し、手順02で確認したURLを入力します。空の入力欄がある場合は、その欄を使います。
3. 画面上部の「保存」を押します。保存後に同じURLが表示されていることを確認します。

登録は会社のオーナーまたは管理者が行います。追加できる件数はプランによって異なります。上限に達している場合は、利用中のドメインを消さず、不要になった登録があるか確認します。

STEP 04

Shopifyのテーマを開く

ホームページの見た目を編集する画面を開きます。テーマはショップのデザインを決めるものです。

1. Shopify管理画面に戻り、左メニューの「販売チャネル」から「オンラインストア」（Online Store）を開きます。
2. ストアで使用中のテーマにある「テーマを編集」を押します。
3. 編集画面の上部で「ホームページ」が選ばれていることを確認します。

この手順ではホームページに設置します。使用中のテーマで保存すると、そのテーマのストアに反映されます。画像はRise 16.1.1の画面です。

STEP 05

カスタムLiquidにコードを貼り付ける

「カスタムLiquid」はコードを置くためのセクションです。Studioでコピーした2行を、ここに貼り付けます。

1. 左側の「テンプレート」エリアで、ストーリーを表示したい位置の「セクションを追加」を押します。
2. 検索欄に「カスタム」と入力し、「カスタムLiquid」を選びます。
3. Studioの「埋め込みコード」タブに戻り、「コピー」をもう一度押します。Shopifyに戻り、追加したセクションの「Liquidコード」欄に2行を貼り付けます。
4. 右上の「保存」を押し、保存が完了するまで待ちます。

ヘッダーやフッターにも「セクションを追加」があります。ホームページの本文に表示する場合は「テンプレート」内を選びます。見出しや説明文は任意です。必要な設置コードはStudioからコピーした2行です。

STEP 06

実際のストアで表示を確認する

ストーリーの丸い画像が並び、タップすると写真が開けば設置完了です。

1. テーマ編集画面の右上にある「…」（アクションを表示）を開き、「表示」を選びます。別のタブでストアが開きます。
2. ストアのページを再読み込みし、設置した位置にストーリーの丸い画像が表示されることを確認します。
3. 丸い画像を1つ押して写真を開きます。写真の右側を押すと次のメディアに進み、右上の「×」で元のページに戻れることを確認します。
4. スマートフォンでも同じストアを開き、表示と開く・閉じる操作を確認します。

無料体験中など、ストアがパスワード保護されている場合は、管理画面から開いたストアのプレビューで確認できます。設置できたことと、一般のお客様にストアが公開されていることは別です。テーマ編集内のプレビューと実際のストアで表示が異なる場合も、まずこのストア画面で確認します。

困ったときは

表示されないとき

次の順で確認すると、原因を見つけやすくなります。

「カスタムLiquid」が見つからない

「セクションを追加」の「セクション」側で「カスタム」を検索します。見つからない場合は、テーマによって利用できるセクションが異なるため、使用中のテーマのヘルプでカスタムLiquidへの対応を確認します。

ストーリーの丸い画像が表示されない

Studioのコレクション・ストーリー・メディアが公開中か、メディアの公開日時を迎えているかを確認します。次に、実際に開いているストアのドメインが許可ドメインと一致するか、2行とも貼り付けて保存しているかを確認し、ストアを再読み込みします。

Studioのプレビューでは見えるのに、ストアでは見えない

Studio内のプレビューだけでは、設置先の許可ドメインまで確認できません。ストアを開いたあとのアドレスを確認し、https://とドメイン部分が登録内容と一致しているか確認します。wwwあり・なしやサブドメインが違うと、別の登録になります。

別の場所に表示される・2つ表示される

「テンプレート」内の追加位置と、同じコードを置いたセクションの数を確認します。位置は左側のセクション一覧からドラッグして調整できます。変更後は保存します。

テーマを変更したら表示されなくなった

コードは設置したテーマに保存されます。別のテーマに切り替えた場合は、新しいテーマにも手順04〜06を行います。

解決しない場合は、お問い合わせ ↗（新しいタブ）で、使用中のテーマ名、ストアURL、表示されない画面の状況をお知らせください。ログイン用のパスワードは不要です。