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のチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024