Shopify テーマ、Liquid、ロゴ、その他の類似トピック
Brooklynテーマをカスタムしています。
ログインアイコン・カートアイコンを変更したいです。
・assets/icons.json
・assets/icons.svg
・assets/theme.scss.liquid
・sections/header.liquid
↑あたりを見てみましたが、うまくいきません…ご教示いただきたくよろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
ほぼ完璧です。
好みもありますが、ShopifyではSVGアイコンはSnippetsにファイルを設けSVGコードを貼るのがスタンダードのようです。
case/whenを使えば、管理もしやすくディレクトリもスッキリするのでよく使っています。
Snippets/svg-icons.liquid
{%- case svg-icons -%}
{%- when 'home' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'search' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'cart' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'login' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- endcase -%}
検索アイコンの場合は以下のコードで出力します。
{% render 'svg-icons' with 'search' %}
参考になれば幸いです。
やり方が合っているかわかりませんが、とりあえず自己解決できましたので下記します。
どなたかのご参考になれば幸いです…。
【やりたいこと】
ログインアイコン・カートアイコンを変更したい
①
上記アイコン2種類をsvgで用意。
設定→ファイルからアップロード+各svgのurlをコピー。
②
sections /header.liquid
◆<span class="icon icon-customer" aria-hidden="true"> </span>
◆<span class="icon icon-cart" aria-hidden="true"></span>
↑それぞれ<span>内に<img>で①svgファイルを読み込む
成功
ほぼ完璧です。
好みもありますが、ShopifyではSVGアイコンはSnippetsにファイルを設けSVGコードを貼るのがスタンダードのようです。
case/whenを使えば、管理もしやすくディレクトリもスッキリするのでよく使っています。
Snippets/svg-icons.liquid
{%- case svg-icons -%}
{%- when 'home' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'search' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'cart' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- when 'login' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- endcase -%}
検索アイコンの場合は以下のコードで出力します。
{% render 'svg-icons' with 'search' %}
参考になれば幸いです。
いきなり質問すいません。
こちらのコードをコピペさせてもらい、httpの部分を変更したのですが反映されません。
他に変更しなくてはいけない箇所があれば教えていただけないでしょうか?
よろしくお願いします。
こまつなさん
コピペしたコードというのは私が回答したcase/whenを使った方法のことでしょうか?
紹介したコードで変更するのは<svg>タグ全体で、もしSVGタグのxmlns属性をアップロードしたファイルのURLに変更したのなら、間違ったやり方です。
SVGファイルをエディタで開き、そのコード(<svg>〜</svg>)を差し替えてください。
pngなどの画像ファイルなら<img>タグを使ってください。
また、必要に応じてCSSファイルも編集する必要があります。
HTMLやCSSの知識がある程度ないとテーマカスタマイズは難しいので、勉強するか外部委託をお勧めします。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024