今すぐ購入ボタンを編集したい

[MARO２]

お世話になっております。

テーマはＤＯＷＮを使用しており、商品ページの「今すぐ購入ボタン」にアイコンを追加したいのですがどのように編集をすればよろしいでしょうか？

[Qcoltd · Accepted solution]

ご質問いただいています、「今すぐ購入ボタン」にアイコンを追加する件ですが、

海外のコミュニティでShopifyのスタッフより、対象ファイルにアクセスすることができないとの回答がありました。

https://community.shopify.com/c/shopify-design/how-to-edit-quot-buy-it-now-quot-button/td-p/527340#M...

ファイル編集できませんので、ご希望のアイコンを追加するには、

CSSやJavaScriptでアイコンを追加する必要があります。

今回はCSSで画像を表示するためのサンプルコードを記載させていただきます。

1.管理画面オンラインストアの『カスタマイズ』をクリック。

2.デフォルトの商品を選択

3.左メニューの商品情報をクリック

4.カスタムCSSに下記CSSを追加

.shopify-payment-button__button--unbranded:before {
  background-image: url(表示したい画像のURL);
  width: 20px;
  height: 20px;
  top: 14px;
  left: 20px;
  background-size: contain;
  vertical-align: middle;
  z-index: 1;
}

width、heightが表示される画像サイズ、topが上部からの位置、leftが左からの位置となりますので、ご希望に合わせ調整ください。

ご参考まで。

(キュー小坂)

[MARO２]

迅速な対応ありがとうございます。

見事にできました。今すぐ購入ボタンについては調べてもわからなかったのですが、編集できないんですね・・・とても勉強になりました！