ショップにサブスクリプションのオプションを表示できるよう、各設定をインストールします。
定期購買アプリのご利用には、基本的にShopify ペイメントのご利用が必須です。
定期購買アプリを設置するテーマを選択
テーマのカスタマイズ画面を開く
画面左側の「埋め込みアプリ」アイコンを押下し、「定期購買:Theme設定」をONにする
2024年4月23日以前にアプリをインストールいただいた店舗様へ
ShopifyのスクリプトAPI廃止に伴い、ウィジェットやマイページを表示させるためのスクリプトの読み込み方法が変更となりました。
現状の仕様では、スクリプトを読み込むためには、「定期購買:Theme設定」をONにする必要があります。必ずご対応ください。
Q. OFFのままだとどうなるか？
A. ウィジェットやマイページが正しく読み込めない可能性があります。
Q. ずっとOFFで運用していたが、ONにして他のアプリに影響はないか
A. はい、特に問題はありません。スクリプトの読み込み方が変更になるだけで、読み込むスクリプト自体が変わるわけではないためです。
商品詳細ページの編集画面を開く
左メニュー「テンプレート > 商品情報」の「ブロックを追加」をクリック
「アプリブロック」内にある、「プラン一覧」を選択
パターン１とパターン２は、デザインの違いになります。お好きな方をご利用ください。
パターン１では、メッセージやカラーの調整はできません。調整したい場合は、パターン２をご利用ください。なお、アイコンのイラスト自体はどちらのパターンでも変更ができませんので、予めご了承ください。
定期ウィジェットの色変更設定
Shopify商品詳細ページに表示される定期ウィジェットのカラー変更ができます
定期ウィジェットの文言は変更できますか？
A.OS2.0対応テーマの場合、テーマの「カスタマイズ」画面より編集いただけます。 ※2.0非対応テーマの場合は以下の方法で実現可能ですが、この機能は非推奨です。将来サポートされない可能性がありますのでご了承下さい。 huckleberry-subscription-widget-container.liquid ファイルがあるかつ、上記のテーマカスタマイズ画面でブロックの追加編集ができないストア様は下記の方法で変更していただけます。 ・変更前 <div class=“huckleberry-subscription-widget-container”></div> ・変更後（変更例） <div class=“huckleberry-subscription-widget-container” data-onetime-purchase-label=”単品購入” data-subscription-label=”定期購入“data-color=”#FFA500″></div>
→お客様アカウントのバージョン確認方法はこちら
→お客様アカウントのバージョンがお客様アカウントの場合の対応手順はこちら
アカウントページの編集画面を開く
アドレスとパスワードを入力して、ログインする
左メニュー「テンプレート」の「セクションを追加」をクリック
「アプリ」タブにある、「定期購買_契約情報」を選択
セクションを追加からの手順は行わず、代わりにsections/main-account.liquidのコード編集画面を開いて、以下を挿入してください。
※ファイル名はテーマごとに異なる可能性があります。
定期購買一覧リンクを表示したい箇所に、以下のコードを追加
<a href="/account?hbSubscriptionPath=/">定期購買一覧</a>上記コードを追加したLiquidの最下部に、以下のコードを追加
<div id="huckleberry-subscription-customer-portal-wrap">
<p><a href="{{ routes.account_url }}">アカウントに戻る</a></p>
<div id="huckleberry-subscription-customer-portal"></div>
</div>お客様アカウントのバージョンが「従来」でなく「お客様アカウント」の場合は、Shopifyの仕様上アカウントページ上にLiquidを追記することができないため、カスタマイズはできません。
①どのテーマで定期販売を可能にしますか？
※選択したテーマに定期購買アプリを設置します。
Sense (現在のテーマ)
②商品詳細ページから定期購入できるよう、ウィジェットを表示する
商品ページsections/product-template.liquidのformタグ内の表示したい箇所に以下のコードを追加します。
<div class="huckleberry-subscription-widget-container"></div>③カートページに定期プランを表示する
sections/cart-template.liquidのカートページを表示したい箇所に以下のコードを追加してください。
※2021年以降にテンプレートをインストールしたストアでは、このステップは不要です。
{% unless item.selling_plan_allocation == nil %}
<span>({{ item.selling_plan_allocation.selling_plan.name }})</span>
{% endunless %}④顧客がマイページにアクセスするための動線を設置する
※お客様アカウントのバージョンがお客様アカウントの場合のみ
templates/customers/account.liquidのコード編集画面を開く。※ファイル名はテーマごとに異なる可能性があります。
定期購買一覧リンクを表示したい箇所に、以下のコードを追加
<a href="/account?hbSubscriptionPath=/">定期購買一覧</a>3. 上記コードを追加したLiquidの最下部に、以下のコードを追加
<div id="huckleberry-subscription-customer-portal-wrap">
<p><a href="{{ routes.account_url }}">アカウントに戻る</a></p>
<div id="huckleberry-subscription-customer-portal"></div>
</div>