FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Buybuttonのバリエーションフォントについて

解決済

Buybuttonのバリエーションフォントについて

N0613
観光客
7 0 0

現在、Buybuttonで作成したコードをWordpressに埋め込んでECサイトを運用しています。

Buybuttonのボタン自体のフォントはコード生成段階で指定ができるのですが、バリエーションの名前と選択肢(プルダウン)のフォントが修正できません。こちらを変更することは可能でしょうか?

Natsumi
1 件の受理された解決策

Qcoltd
Shopify Partner
1096 447 441

成功

こちらのページにBuy Butoonの詳しいカスタマイズ方法が記載されています。

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

 

簡単にご説明しますと、

質問者様が変更したいと考えていらっしゃる場所を私が勘違いしていなければ、

下記のようなコードになるはずです。

 

カスタマイズ状況によって異なりますが、元々のBuy Buttonのコードの下部。

  "option": {},
  "cart": {
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {}
},
      });
    });
  }
})();
/*]]>*/
</script>

 

上記の最初の行にある "option": {}, を下記のように変更します。

    "option": {
      "styles": {
        "label": { // バリエーションの名前のフォントサイズ
          "color": "#0f0", //お好きな文字色を設定してください
          "font-size": "30px", //お好きなフォントサイズを設定してください
        },
        "select": { // セレクトボックスのフォント調整
          "color": "#f00", //お好きな文字色を設定してください
          "font-size": "10px", //お好きなフォントサイズを設定してください
        }
      }
    },

 

ご参考まで。

(キュー田辺)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1096 447 441

成功

こちらのページにBuy Butoonの詳しいカスタマイズ方法が記載されています。

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

 

簡単にご説明しますと、

質問者様が変更したいと考えていらっしゃる場所を私が勘違いしていなければ、

下記のようなコードになるはずです。

 

カスタマイズ状況によって異なりますが、元々のBuy Buttonのコードの下部。

  "option": {},
  "cart": {
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {}
},
      });
    });
  }
})();
/*]]>*/
</script>

 

上記の最初の行にある "option": {}, を下記のように変更します。

    "option": {
      "styles": {
        "label": { // バリエーションの名前のフォントサイズ
          "color": "#0f0", //お好きな文字色を設定してください
          "font-size": "30px", //お好きなフォントサイズを設定してください
        },
        "select": { // セレクトボックスのフォント調整
          "color": "#f00", //お好きな文字色を設定してください
          "font-size": "10px", //お好きなフォントサイズを設定してください
        }
      }
    },

 

ご参考まで。

(キュー田辺)

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

ご教示いただいたコードで修正することができました!

不足した情報の中から要望を汲み取って下さり本当にありがとうございます。

Natsumi