ショップにサブスクリプションのオプションを表示できるよう、各設定をインストールします。
定期購買アプリのご利用には、基本的に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>
→お客様アカウントのバージョン確認方法はこちら
→対応手順はこちら
④-1「お客様アカウント」を選択しているストア向けの定期購買マイページ動線設置方法
設定＞お客様アカウント＞お客様アカウントを選択されているストア様向けの、マイページ動線設定方法です。 ※従来を選択されている場合は、こちらの手順をご確認ください。 ※お客様アカウントのバージョンを確認する方法はこちらをご確認ください。 --- 定期購買マイページ動線設置手順 ▫️デフォルトのマイページを利用している場合 1. 販売チャネル＞オンラインストア＞テーマ＞カスタマイズをクリック （トップページの編集画面に遷移します。） 2. 「ホームページ」をクリックし、「チェックアウトとお客様アカウント」を選択 （チェックアウト＞設定＞カスタマイズ クリック後の画面へ遷移します。） 3. 「チェックアウト」をクリックし、「注文」を選択 4. サイドバーの「アプリ」をクリックし、「定期購買」を選択 5. ページの追加先として「アカウント」を選択 6. サイドバーの「メニューを追加する」をクリック 7. 定期購買マイページへのリンクとして表示させたい名称を入力 8. リンクに定期購買を設定し、「保存」 注意点 下記は、運用に合わせてON,OFFどちらか選択ください。 ・注文テンプレートの再購入ボ
→対応手順はこちら
④-2「従来（のお客様アカウント）」を選択しているストア向けの定期購買マイページ動線設置方法
2026年2月26日以降、「従来のお客様アカウント」は非推奨となりました。 新規ストアには自動的に「新しいお客様アカウント」が適用されます。 （公式アナウンスはこちら） 設定＞お客様アカウント＞従来を選択されているストア様向けの、マイページ動線設定方法です。 ※お客様アカウントを選択されている場合は、こちらの手順をご確認ください。 ※お客様アカウントのバージョンを確認する方法はこちらをご確認ください。 --- 定期購買マイページ動線設置手順 ▫️デフォルトマイページを利用されている場合 1. アカウントページの編集画面を開く 2. アドレスとパスワードを入力して、ログインする 3. 左メニュー「テンプレート」の「セクションを追加」をクリック 4. 「アプリ」タブにある、「定期購買_契約情報」を選択 --- ▫️マイページカスタマイズを利用されている場合 ※「従来(のお客様アカウント)」を利用している場合 本番環境へ反映させるにはテーマファイルの編集が必要となります。 1. テーマ内のhuckleberry-subscription-customer-portal.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>