スマホでのバリエーションの文字色

yanana · ‎06-07-2022

外部のwordpressサイトにbuybuttonのコードを埋め込んで商品ページを作成しています。バリエーションのある商品には「カートに入れる」ボタンの上にセレクターがつきますが、その文字色と字間が変更できません。PCとAndroidでは文字色は黒なので、このままでも良いと言えば良いのですが、iOSだと青いです。これを変える方法はありませんでしょうか？

あと、セレクタをクリック（タップ）した時に、青（mac）やオレンジ（Android）の枠線が出るのをやめたいのですが、方法はありますでしょうか？

宜しくお願いします。

Qcoltd · ‎06-10-2022

Buy Buttonの詳しいカスタマイズ方法のドキュメントが下記にありますので、ご確認いただくと良いかもしれません。

https://shopify.github.io/buy-button-js/customization/

私も購入ボタンのカスタマイズに慣れているわけではないので、

触りだけですが、

カスタムコードを記載しておきます。

購入ボタンのコードの中に、

"option": {},

という箇所があるかと思います。(質問者様のカスタマイズ状況によってコードは異なります。)

それを下記に書き換えます。

    "option": {
      "styles": {
        "select": {
          "color": "#f00", //お好きな文字色を設定してください
          "letter-spacing": "10px", //お好きな文字間隔を設定してください
          "outline": "none" //アウトラインを無効化します。
        }
      }
    },

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/　テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

Qcoltd · ‎06-10-2022