定期購買アプリ｜ヘルプページ

プランの表示をボタンではなく、ドロップダウンにできますか？

A.既存のウィジェットを削除いただいた上で、コードを変更することで実現可能です。

 

【テーマのカスタマイズ画面にて、ブロックでウィジェット設置している場合】

  1. ウィジェットを非表示にする

  1. コードを編集画面にて、ドロップダウンを表示させたい箇所のファイルとコードを探す

    例）Dawnの場合、例えば以下

    ファイル：buy-buttons.liquid　

    位置：<div class="product-form__buttons">　の真上

  2. 該当箇所に以下のコードを追加

JavaScript

  1. CSSを適宜調整（テーマごとにファイル名は異なりますが、Dawnならbase.cssなど）

 

【以下コード*を追加してウィジェット設置している場合】

※<div class="huckleberry-subscription-widget-container"></div>

  1. 設置済の下記をコメントアウトあるいは削除する

    <div class="huckleberry-subscription-widget-container"></div>

  2. 1 のコードが設置されていた箇所へ、以下のコードを追加

JavaScript

  1. CSSを適宜調整（テーマごとにファイル名は異なりますが、Dawnならbase.cssなど）

 

 

【上記どちらの方法でも設置しておらず、コード編集画面にて、スニペットフォルダを閲覧するとhuckleberry-から始まるファイルが4つ存在している場合】

  1. ウィジェットを表示させている箇所へ以下のコードが記載されているかと思いますが、

    {% render 'huckleberry-subscription-widget-container' %}

    以下に差し替えます。

    {% render 'huckleberry-subscription-product' %}

  2. スニペットフォルダ > huckleberry-subscription-product.liquidの中身を、下記のように変更する

JavaScript

  1. CSSを適宜調整（テーマごとにファイル名は異なりますが、Dawnならbase.cssなど）