FROM CACHE - jp_header
解決済

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

mongorian346
Shopify Partner
23 0 1

商品詳細ページにて、

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

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

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

 

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 431 418

成功

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

ご使用のテーマが不明なため、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
1051 431 418

成功

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

ご使用のテーマが不明なため、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