Liquid、JavaScriptなどに関する質問
お世話になっております。
テーマはDOWNを使用しており、商品ページの「今すぐ購入ボタン」にアイコンを追加したいのですがどのように編集をすればよろしいでしょうか?
解決済! ベストソリューションを見る。
成功
ご質問いただいています、「今すぐ購入ボタン」にアイコンを追加する件ですが、
海外のコミュニティでShopifyのスタッフより、対象ファイルにアクセスすることができないとの回答がありました。
ファイル編集できませんので、ご希望のアイコンを追加するには、
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が左からの位置となりますので、ご希望に合わせ調整ください。
ご参考まで。
(キュー小坂)
成功
ご質問いただいています、「今すぐ購入ボタン」にアイコンを追加する件ですが、
海外のコミュニティでShopifyのスタッフより、対象ファイルにアクセスすることができないとの回答がありました。
ファイル編集できませんので、ご希望のアイコンを追加するには、
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が左からの位置となりますので、ご希望に合わせ調整ください。
ご参考まで。
(キュー小坂)
迅速な対応ありがとうございます。
見事にできました。今すぐ購入ボタンについては調べてもわからなかったのですが、編集できないんですね・・・とても勉強になりました!
ユーザー | ランク |
---|---|
36 | |
11 | |
7 | |
6 | |
6 |
すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023