インストール詳細

OS 1.0のテーマ または OS2.0のテーマでアプリブロックに対応していない場合

Shopify OS 1.0のテーマ、またはカスタマイズ画面からカートページにアプリのブロックを追加できない場合は、コードを編集する必要があります。

対応していない場合は、下記画像のようなメッセージが表示されます。

自動インストールの手順

自動インストールを行うことで、手動でコードの編集をせずとも本アプリをご使用いただけます。下記の手順に沿って設定を行ってください。

STEP1: テーマの複製

インストールする前に「オンラインストア」>「テーマ」でテーマを複製しておきましょう。

「このテーマのコピーを作成しました」にチェックを入れてから、「次へ」ボタンをクリックしてください。

※テーマを複製せず、「このテーマのコピーを作成しました」にチェックを入れなくても次の作業を行うことはできますが、万が一不具合が出た場合のために事前にこれらの作業を行うことを推奨します。

STEP2: 自動インストール

自動インストールでは、cart-template.liquidの<form>の閉じタグの直前に以下のスニペットを挿入します。

{% include “fbl-dalivery-date” %}

自動インストールを行う場合は「はい」を選択してください。

cart-template.liquidがテーマにない場合、もしくは別の箇所にスニペットを挿入する場合は、「いいえ」を選択してください。

STEP2で「はい」を選択した場合

STEP3: 完了

以上でアセットのインストールは完了です。

ホーム画面から商品グループなどを設定してください。

STEP2で「いいえ」を選択した場合

下記の「独自テーマを使用している または 自動インストールが上手く行かない場合」に進んでください。

独自テーマを使用している または 自動インストールが上手く行かない場合

STEP1 : コードをコピーする

以下のコードをクリップボードにコピーしてください。

{% include “fbl-dalivery-date” %}

STEP2: cart-template.liquidに貼り付ける

「オンラインストア」>「テーマ」>「アクション」>「コードを編集」でコード編集画面を開きます。

STEP1でコピーしたコードを配送日時指定を表示したい場所に貼り付けてください。

下の例では、「Sections」>「cart-template.liquid」にコードを追加しています。

STEP3: 完了

以上でアセットのインストールは完了です。

ホーム画面から商品グループなどを設定してください。

OS 2.0のテーマの場合

Shopify OS 2.0のテーマでカスタマイズ画面からカートページにアプリのブロックを追加できる場合はコードを編集する必要はありません。

対応している場合は、下記画像のようなメッセージが表示されます。

そのままホーム画面から商品グループなどを設定してください。

OS 1.0のテーマからOS 2.0のテーマに移行したときの注意点

OS 1.0のテーマからOS 2.0のテーマに移行した場合は、「スクリプトを取り除く」をクリックして余分なスクリプトを取り除いてください。

カスタマイズ画面で配送日時指定の項目の表示位置を設定する手順

STEP1: カートページをカスタマイズ

「オンラインストア」>「テーマ」>「カスタマイズ」からカスタマイズ画面へ移行してください。

「カート」ページを選択してください。

STEP2: ブロックを挿入

メニューから配送日時指定の項目を挿入したいセクションを選択し、「ブロックを追加」をクリックしてください。

「アプリ」から「Delivery Date Picker」を選択します。

STEP3: 完了

「保存する」をクリックして配送日時指定の項目の表示位置の設定は完了です。