④ テーマにかんたんインストール

ショップにサブスクリプションのオプションを表示できるよう、各設定をインストールします。

1. 定期購買アプリを設置するテーマを選択

1. テーマのカスタマイズ画面を開く

2. 画面左側の「埋め込みアプリ」アイコンを押下し、「定期購買:Theme設定」をONにする

1. 商品詳細ページの編集画面を開く

2. 左メニュー「テンプレート > 商品情報」の「ブロックを追加」をクリック

3. 「アプリブロック」内にある、「プラン一覧」を選択

   ※（パターン１）と（パターン２）は、デザインの違いになります。お好きな方をご利用ください。

1. アカウントページの編集画面を開く

2. アドレスとパスワードを入力して、ログインする

3. 左メニュー「テンプレート」の「セクションを追加」をクリック

4. 「アプリ」タブにある、「定期購買_契約情報」を選択

定期購買一覧リンクの表示位置をカスタマイズしたい場合

セクションを追加からの手順は行わず、代わりにsections/main-account.liquidのコード編集画面を開いて、以下を挿入してください。

※ファイル名はテーマごとに異なる可能性があります。

1. 定期購買一覧リンクを表示したい箇所に、以下のコードを追加

<a href="/account?hbSubscriptionPath=/">定期購買一覧</a>

2. 上記コードを追加したLiquidの最下部に、以下のコードを追加

<div id="huckleberry-subscription-customer-portal-wrap">
   <p><a href="{{ routes.account_url }}">アカウントに戻る</a></p>
   <div id="huckleberry-subscription-customer-portal"></div>
</div>

①どのテーマで定期販売を可能にしますか？

※選択したテーマに定期購買アプリを設置します。

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 %}

④顧客がマイページにアクセスするための動線を設置する

1. templates/customers/account.liquidのコード編集画面を開く。

   ※ファイル名はテーマごとに異なる可能性があります。

2. 定期購買一覧リンクを表示したい箇所に、以下のコードを追加

<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>

#huckleberry-subscription-customer-portal-wrap p:first-child {
    margin: 20px;
}