前提

Shopify管理画面＞設定＞お客様アカウント　にてお客様アカウントを選択している店舗様向けの記事です。

設定手順

ステップ1. 反映用のテーマファイル作成

1. Shopify管理画面 ＞オンラインストア＞テーマ ＞「...」＞ コードを編集を開く

   

2. templatesフォルダ配下に新規ファイルを追加する 名称はpage.subscription-account.liquidとしてください

   画面収録 2025-11-08 5.10.22.mov

3. コードの貼り付け 2.で作成したファイルへ、下記のコードを貼り付けます。

   <div>
     <div id="huckleberry-subscription-customer-portal-wrap-experimental" style="margin-top: 84px;">
       <div id="huckleberry-subscription-customer-portal"></div>
     </div>
   </div>
   

<aside>

⚠️注意点

以下の2つのid属性は必ずこのまま記述してください

• id="huckleberry-subscription-customer-portal-wrap-experimental"
• id="huckleberry-subscription-customer-portal"

※これら2つのid属性がマイページを表示するための「目印」になります。これらを削除したり変更したりすると、マイページが表示されません。

💡ポイント

使用しているテーマに応じて、以下の調整を行なってください。

• クラス名を追加
• スタイル属性を追加・変更

※Dawnなどの無料テーマでは、外側のコンテナ要素にクラス名page-widthを追加すると崩れず表示されるケースが多いようです 例）

<div class="page-width">
  <div id="huckleberry-subscription-customer-portal-wrap-experimental" style="margin-top: 84px;">
    <div id="huckleberry-subscription-customer-portal"></div>
  </div>
</div>

</aside>

ステップ2. ページの作成

1. Shopify管理画面 ＞オンラインストア＞ページ　を開き、ページを追加する　を押下

2. タイトル、テンプレート、URLハンドルをそれぞれ以下のように設定

   

   項目	設定	備考
   タイトル	任意（例：カスタムマイページ）	顧客には表示されません
   テンプレート	subscription-account	ステップ1で作成したものを選択します
   URLハンドル	subscription-account	必ずこの値にしてください

   <aside>

   ⚠️重要

   URLハンドルは必ず subscription-account にしてください。

   これによりURLが /pages/subscription-account になります。

   </aside>

ステップ3. メニューにリンクを追加

1. Shopify管理画面 ＞オンラインストア ＞テーマ>カスタマイズ を開く