こんにちはrey( @reydesign8376) です
今日も今日とてShopifyしてます
Shopifyの無料テーマがバージョン2.0になってからというもの
コーディングスキルが無い私でも自由度が高いカスタマイズができるようになったと思います。歓喜
カートアイコンのデザインが自由に
とても簡単な方法で変更できるようになりました！
「購入時」「カートが空の時」で分けられるようになっているので
ちょっと楽しい。
▼カートが空の状態
▼カートに物が入っている時
画像を用意しておけばこんな感じで簡単に実装できちゃいます！
カスタマイズ方法
- 設定＞ファイル＞ファイルをアップロードで用意したカートアイコンをアップロードします。
ファイルリンクコピーし画像コードを用意しておきます。
<img src=”ファイルリンク” alt=”カートアイコン” width=”30px”>
<img src=”ファイルリンク” alt=”カートアイコン__空” width=”30px”>
- オンラインストア＞コードを編集
Snippets(アイコンなどを司るファイル)＞icon-cart.liquidとicon-cart-empty.liquid
icon-cart.liquidとicon-cart-empty.liquid 2つのファイルを開きます。
icon-cart.liquidには「カートに物を入れた時のアイコン」
icon-cart-empty.liquidには「カートに物を入れる前のアイコン」のコードに置き換えます
保存＞プレビューするで実装を確認
問題なければアイコンが変更されます！大きさ調整は widthで調整ができます。
とっても簡単にカスタマイズができちゃうので是非お試しくださいませ！
今回の使用テーマ
Ride
補足・注意点
- この方法はShopifyが提供している無料テーマバージョン2.0で確認済
その他のテーマでは出来ない場合があります。 - 作業前は必ずテーマのコピー(バックアップ)すること
- カスタマイズは自己責任です。悪しからず。
Shopifyのアイコンはこんな感じで表示されてるらしい
前のバージョンや2.0に非対応の有料テーマはこんな感じでアイコンを表示しているらしい
リキッドマスターズ代表のむーさんに教えてもらいました。Shopifyに関してカスタマイズや運営サポまで鬼強の方です。
shopifyってcart.apiを使ってajax通信をすると現在のカート情報を引っ張ってこれるんですけど、ajax通信の場合はliquidに対応しないんです。
むーさんより
リロードするとliquidを再度読み込むので
★カートの中身をliquidで判定できる
となるとページ読み込み時のアイコンを選べるんです。
{% if cart.item_count > 0 %}
カートの中身が0より大きければ（つまり空でなければ）をliquidで書いておけばページリロード時にアイコン変更出来るんです。
これがajax通信でカートに入れる構造の場合はカートアイコン自体もJavaScriptで変更する必要があるんですよ。
Dawnは最初からそれが装備されてるテーマって事になります＾＾
もう私には高度すぎてわかりませんでした！
とりあえずバージョン2.0はajaxの中に組み込まれてるらしいです。
むーさんShopifyブログ｜https://im-sosleepy.com/
コメント