テーマの不要パーツを非表示にする

ユーザーがギフト設定時にテーマ内の数量カウンターやメモ欄を非表示にできる機能です。

• アプリの仕様上、テーマの数量カウンターやメモ欄の内容は、All in gift経由の注文では注文管理画面に取り込まれません。

  そのためユーザーがギフト設定をする際、テーマ側の数量カウンターやメモ欄を非表示にする必要があります。

• 他社の日時指定アプリを使用している場合、eギフトの日時指定は受取者が行うため、購入画面の日時指定ウィジェットを非表示にしてください。

1. テーマのメモ欄や数量カウンターのクラス名やID名を、Google Chromeの検証ツールなどで確認する。 （クラス名やID名は、テーマや店舗によって異なります）

2. オンラインストア > テーマ > カスタマイズ をクリック

3. All in gift を実装しているページを選択

4. All in giftブロックをクリック

5. アプリ編集画面の一番下にある「eギフト選択時に非表示にする要素のIDやクラス名（複数可、カンマ区切り）」に、1で確認したクラス名やID名を入力

参考情報

6. 保存をクリックして完了です。

7. 保存後、購入ページにてギフト配送を希望する ・住所を知らない相手にeギフトで贈る をクリックして、不要パーツが非表示になっていることを確認してください。

8. 問題がないことを確認したら初期設定は完了です。

1. Shopify管理画面で該当テーマの「コードを編集」

2. 対象HTML/Liquidにdata-hide-cancel-button等の属性を追加

3. CSS/JS調整が必要な場合は各ファイルで対応

4. 保存・動作確認

仕様

• 指定したクラスやIDにはvisibility: hidden が適用されます。 この場合、要素は画面上で見えませんが空白（スペース）は残ります。

空白（スペース）や任意の要素を完全に非表示にしたい場合

• テーマ側でJavaScriptを使い、visibility: hiddenが適用された要素にdisplay: noneを追加してください。

注意点

visibility:hidden →display:none の変更は、テーマによってレイアウト崩れ等のリスクがあります。

検証は必ず複製テーマで行い、本番公開前に十分確認をお願いいたします。

例：.product-form__submitの部分を非表示にしたいクラス名やID名に変更してください。

例：.product-form__submitの部分を非表示にしたいクラス名やID名に変更してください。
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const submitButton = document.querySelector('.product-form__submit');

    if (submitButton) {
      // MutationObserverのコールバック関数
      const callback = (mutationsList) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const styles = window.getComputedStyle(submitButton);
            if (styles.visibility === 'hidden') {
              submitButton.style.display = 'none';
            }else{
              submitButton.style.display = 'block';
            }
          }
        }
      };

      // オブザーバのインスタンスを作成
      const observer = new MutationObserver(callback);
      observer.observe(submitButton, { attributes: true, attributeFilter: ['style'] });
    }
  });
</script>