FROM CACHE - jp_header

拡大アイコンのカスタマイズについて

8910
遊覧客
41 0 2

画像を拡大する時にタップする拡大アイコンを、自分で用意したアイコンにカスタマイズすることは可能でしょうか?

テーマはDawnです。

購入カゴやアカウントアイコンをカスタマイズしたので、こちらも同じテイストのアイコンにカスタマイズしたいと考えています。

ご協力頂ける方がいましたらご教示頂けますと嬉しいです。よろしくお願いします。

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

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

ご質問いただいている、拡大アイコンのカスタマイズについてですが、アイコンの変更方法を記載させていただきます。

配置するアイコンは管理画面 > コンテンツ > ファイルにアップした画像を使用します。

 

前提作業

管理画面 > コンテンツ > ファイルでアップロードした画像の右側にある鎖マークをクリックし画像のリンクをコピーしてください。

Qcoltd_0-1678266716947.png

 

拡大アイコン変更方法

  1. 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
  2. ファイル検索にて「icon-zoom.liquid」を検索し表示してください。
  3. 1〜14行目が現在のアイコンになりますのでそれを下記に変更してください。
    <img  src="前提作業でコピーした対象画像のリンクに置き換え"  class="icon icon-plus" id="icon-zoom-size" >
  4. 変更が終わったら保存ボタンを押してください。

 

CSSを設定しなくてもアイコンが想定通りのサイズで表示されていましたら、下記は不要となります。

 

CSS追加方法

  1. 上記「拡大アイコン変更方法」1と同じとなります。
  2. ファイル検索にて「base.css」を検索し表示してください。
  3. ファイルの先頭に下記を追加してください。

    #icon-zoom-size {

      width: 1.4rem;

      height: 1.4rem;

    }

  4. 変更が終わったら保存ボタンを押してください。

※アイコンサイズを変更する場合は「1.4rem」の2部分をお好みのサイズに変更ください。

 

ご参考まで。

(キュー小坂)

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

ご返信ありがとうざいます!

変更出来ました、いつもありがとうございます!