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

「カートに追加する」の横にカートアイコンを表示させたい。

解決済

「カートに追加する」の横にカートアイコンを表示させたい。

mongorian346
Shopify Partner
23 0 1

商品詳細ページにて、

自分のには「カートに追加する」ボタンにアイコンが表示されていません。

これは元々なのか、何かのエラーでこうなっているのか、

どちらにせよここにカートアイコンを表示させるためにどうすればいいですか?

 

スクリーンショット_2023-02-26_17_04_17.png

1 件の受理された解決策

Qcoltd
Shopify Partner
1120 453 448

成功

ご質問いただいている、添付画像赤枠にカートアイコンを表示させることは可能です。

ご使用のテーマが不明なため、Dwanテーマを例に解説させていただきます。

Dwanテーマでない場合は下記手順のファイル名等が異なる場合があります。

 

カートアイコン表示手順

  1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
  2. コード編集画面の「ファイルを検索」エリアに、『main-product.liquid』と入力しソートされたファイルを開きます。
  3. main-product.liquidファイル内で、『<span>』を検索してください。
  4. 3で検索した『<span>』の前の行に下記コードを記載

 

<style>
  .cart_icon {width:20px; height:20px; margin-right: 10px; }
  /* 上記:カートアイコンのサイズ、テキストとの空き幅調整 */
  .product-form__submit:disabled .cart_icon{display:none}
  /* 上記:売り切れなどボタンが押せない場合カートアイコンを非表示 */
</style>
<img  src="管理画面でアップロードした画像のURL" class="cart_icon">

 

 

追加例イメージ

Qcoltd_0-1677579920478.png


表示例イメージ

Qcoltd_1-1677579920371.png

 

 

ご参考まで。

(キュー小坂)

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

元の投稿で解決策を見る

3件の返信3

Qcoltd
Shopify Partner
1120 453 448

成功

ご質問いただいている、添付画像赤枠にカートアイコンを表示させることは可能です。

ご使用のテーマが不明なため、Dwanテーマを例に解説させていただきます。

Dwanテーマでない場合は下記手順のファイル名等が異なる場合があります。

 

カートアイコン表示手順

  1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
  2. コード編集画面の「ファイルを検索」エリアに、『main-product.liquid』と入力しソートされたファイルを開きます。
  3. main-product.liquidファイル内で、『<span>』を検索してください。
  4. 3で検索した『<span>』の前の行に下記コードを記載

 

<style>
  .cart_icon {width:20px; height:20px; margin-right: 10px; }
  /* 上記:カートアイコンのサイズ、テキストとの空き幅調整 */
  .product-form__submit:disabled .cart_icon{display:none}
  /* 上記:売り切れなどボタンが押せない場合カートアイコンを非表示 */
</style>
<img  src="管理画面でアップロードした画像のURL" class="cart_icon">

 

 

追加例イメージ

Qcoltd_0-1677579920478.png


表示例イメージ

Qcoltd_1-1677579920371.png

 

 

ご参考まで。

(キュー小坂)

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

回答ありがとうございます。(テーマはDAWN)

教えて頂いた箇所に指定コードを書き込んだところ、以前実装した追尾するカート部分には反映されたのですが、メインの部分には反映されなかったです。

2つの部分は使用しているコードは同じなのですが、なぜか片方しか反映されないです。色々試してみたんですが、原因がよくわかりません。

 

スクリーンショット_2023-03-03_10_52_37.png

mongorian346
Shopify Partner
23 0 1

反映しなかった部分はセクションのbuy-buttons.liquidで同じ手順を踏むと反映されました。

スクリーンショット 2023-03-03 13.21.54.png