Brooklynテーマをカスタムしています。
ログインアイコン・カートアイコンを変更したいです。
・assets/icons.json
・assets/icons.svg
・assets/theme.scss.liquid
・sections/header.liquid
↑あたりを見てみましたが、うまくいきません…ご教示いただきたくよろしくお願いいたします。
やり方が合っているかわかりませんが、とりあえず自己解決できましたので下記します。
どなたかのご参考になれば幸いです…。
【やりたいこと】
ログインアイコン・カートアイコンを変更したい
①
上記アイコン２種類をsvgで用意。
設定→ファイルからアップロード+各svgのurlをコピー。
②
sections /header.liquid
◆
◆
↑それぞれ内にで①svgファイルを読み込む
③
assets /timber.scss.liquid
◆.icon-cart:before { content:‘\e600’; }
◆.icon-customer:before { content:‘\e605’; }
↑コメント化して、非表示
④
新規cssを作成+layout /theme.liquidで新規cssを読み込ませる
【新規css記述】
span.icon.icon-customer,
span.icon.icon-cart {
width: 1em;
}
以上です。
合っているかどうかも自信がなく（汗）
ほかにスマートなやり方等ありましたら、引き続きご教示いただけますと幸いです。
テーマカスタム引き続き学習していきたいと思いますので、また不明な点があれば質問させてください。
よろしくお願いいたします。
ほぼ完璧です。
好みもありますが、ShopifyではSVGアイコンはSnippetsにファイルを設けSVGコードを貼るのがスタンダードのようです。
case/whenを使えば、管理もしやすくディレクトリもスッキリするのでよく使っています。
Snippets/svg-icons.liquid
{%- case svg-icons -%}
{%- when 'home' -%}
{%- when 'search' -%}
{%- when 'cart' -%}
{%- when 'login' -%}
{%- endcase -%}
検索アイコンの場合は以下のコードで出力します。
{% render 'svg-icons' with 'search' %}
参考になれば幸いです。
1 Like
1 Like
いきなり質問すいません。
こちらのコードをコピペさせてもらい、httpの部分を変更したのですが反映されません。
他に変更しなくてはいけない箇所があれば教えていただけないでしょうか？
よろしくお願いします。
こまつなさん
コピペしたコードというのは私が回答したcase/whenを使った方法のことでしょうか？
紹介したコードで変更するのは
SVGファイルをエディタで開き、そのコード（）を差し替えてください。
pngなどの画像ファイルならタグを使ってください。
また、必要に応じてCSSファイルも編集する必要があります。
HTMLやCSSの知識がある程度ないとテーマカスタマイズは難しいので、勉強するか外部委託をお勧めします。