FROM CACHE - jp_header
解決済

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

MARO2
Shopify Partner
2 0 0

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

 

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1012 412 388

成功

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

海外のコミュニティで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.左メニューの商品情報をクリック

Qcoltd_0-1682336418798.png

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

Qcoltd_1-1682336418798.png

 

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

 

ご参考まで。

(キュー小坂)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1012 412 388

成功

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

海外のコミュニティで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.左メニューの商品情報をクリック

Qcoltd_0-1682336418798.png

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

Qcoltd_1-1682336418798.png

 

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

 

ご参考まで。

(キュー小坂)

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

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

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