FROM CACHE - jp_header

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

解決済

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

yanana
Shopify Partner
18 0 3

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

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

宜しくお願いします。

1 件の受理された解決策

Qcoltd
Shopify Partner
1059 435 427

成功

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/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1059 435 427

成功

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/
yanana
Shopify Partner
18 0 3

アドバイス通りにやってみました。うまくいきました。ありがとうございます!!