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

日本語 ディスカッション 技術的なQ＆A

Topic summary

DOWNテーマを使用しているユーザーが、商品ページの「今すぐ購入」ボタンにアイコンを追加する方法について質問。

問題点:

  • Shopifyスタッフの回答により、対象ファイルへの直接アクセスができないことが判明
  • 海外コミュニティの参考リンクが提供された

解決方法:

  • CSSまたはJavaScriptでアイコンを追加する必要がある
  • カスタムCSSを使用した画像表示のサンプルコードが提供された

実装手順:

  1. 管理画面のオンラインストア「カスタマイズ」から設定
  2. デフォルト商品を選択し、商品情報メニューをクリック
  3. カスタムCSSに提供されたコードを追加
  4. width、height、top、leftなどのパラメータで画像サイズと位置を調整

質問者は提供された方法で無事に実装に成功し、解決済み。

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
2

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

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

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

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

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

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

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

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

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

Qcoltd_0-1682336418798.png
Qcoltd_0-1682336418798.png1470×946 119 KB

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

Qcoltd_1-1682336418798.png
Qcoltd_1-1682336418798.png1470×1003 153 KB

.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が左からの位置となりますので、ご希望に合わせ調整ください。

ご参考まで。

(キュー小坂)

1 Like