こんにちわ。海マルシェちくまるです。
このブログでは商品のことをいろいろお話したいと思っておりますが・・・・
じゃないこともいろいろ書いてゆこうと思っております。むしろモリモリと。
当店と同じようにshopifyでサイトをお持ちで 特に自社スタッフで管理やカスタマイズを行っている方は いつもいろんなShopify Expertsの方が神の啓示をnotoやブログに残していただいてくださってるのを漁りまくっているはずですよね。
ご多忙にもれず私もその一人です。とても助かっています。
ぜひ会社の方の許可が下りればガッシガシにカスタマイズしていきましょう。その方が たぶん いい感じです。(たぶん)
当店も見た目にはわかんないくらいに変更はしています。
今回は 最近shopifyさんがリリースした Linkpop(リンクポップ) についてちょっと気になったのでその件についてもちょいと記載します。
当店も登録しましたよ！Linkpop。
海マルシェちくまる Linkpopページ
→ https://linkpop.com/chikumaru
多分 よくわからないけど作ったという人も多いはず。
はい。私もそうです。
いろんな可能性を今後秘めたツールであることは確かなので とりあえずURL取られる前に抑えておく意味で作っておきました。
今後も更新はこまめにおこなってゆきます。
リンクポップについてはとりあえずまた今度ということで
今回リンクポップの登録が済んだということは なにが言いたいかという
「TOPページに出てるSNSアイコンん所に Linkpopも追加したい」
っちゅーことです。
うちのテーマは漢気あふれるTHE・無料のテーマ「Dawn」の
バージョン2.3.0！・・・いやいや もうとっくに5.0.0でてんですけど。
実は古いのまだ使っておりまして 当然ですが2.3.0なんて昔のですんでLinkpopのリの字もないわけです。
今 v5.0.0の中も確認してきましたが やっぱりアイコンないんですねぇ。
欲しいですねぇ。んー欲しがりさんですね！
じゃあ作りましょう！
ー手順１ー
Snippets に新規作成 名前は icon-linkpop.liquid で。
中身は以下コピペ
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkpop" viewBox="0 0 21 21">
<path fill="currentColor" d="M4,6.7c0-3.4,2.8-6.1,6.5-6.1c3.7,0,6.5,2.7,6.5,6.1c0,3.4-2.8,6.1-6.5,6.1C6.8,12.8,4,10.1,4,6.7z M13.6,6.7 c0-1.8-1.4-3.2-3.1-3.2c-1.8,0-3.1,1.4-3.1,3.2c0,1.8,1.3,3.2,3.1,3.2C12.2,9.9,13.6,8.5,13.6,6.7z M17,19.4 c0.1,0.5-0.3,0.9-0.8,0.9h-1.6c-0.5,0-0.9-0.4-1-0.9C13.2,18,12,17,10.5,17c-1.5,0-2.7,1-3.1,2.5c-0.1,0.5-0.5,0.9-1,0.9l-1.6,0 c-0.5,0-0.9-0.4-0.8-0.9c0.4-3.1,3.1-5.4,6.5-5.4C13.9,14,16.6,16.3,17,19.4z">
</svg>
うーん この。
手順１に取り掛かる時 壮大に つまづきましたね。
だって LinkpopのSVGアイコンなんて用意されてないんですもの。作りましたよ。それっぽいの。ちゃんと公式のファビコンにのっとって同じ奴にしましたよ。
ー手順２ー
sections > footer.liquid 200行目くらいに以下コピペ
{%- if settings.social_linkpop_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_linkpop_link }}" class="link list-social__link" >
{%- render 'icon-linkpop' -%}
<span class="visually-hidden">{{ 'general.social.links.linkpop' | t }}</span>
</a>
</li>
{%- endif -%}
sections > header.liquid 250行目くらいに以下コピペ
{%- if settings.social_linkpop_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_linkpop_link }}" class="list-social__link link">
{%- render 'icon-linkpop' -%}
<span class="visually-hidden">{{ 'general.social.links.linkpop' | t }}</span>
</a>
</li>
{%- endif -%}
630行目あたり
{{ settings.social_linkpop_link | json }}
を追加。追加したら1行上の } に , つける
このねぇ カンマ1発の仕様がわかるまで 何度も「なんで？なんなん？？どうしてエラー出るの？？？」で数十分消費。まぁ今でもたまに やからかします。
気を付けて！
ー手順３ー
config > setting_schema.json 290行目あたりに以下コピペ
{
"type": "text",
"id": "social_linkpop_link",
"label": "t:settings_schema.social-media.settings.social_linkpop_link.label",
"info": "t:settings_schema.social-media.settings.social_linkpop_link.info"
}
を追加。追加したら1行上の } に , つける ← コレ。
ー手順４ー
Locales > ja.schema.json 360行目あたり以下コピペ
"social_linkpop_link": {
"label": "linkpop",
"info": "https:\/\/linkpop.com\/shopify"
},
ここまでできたら たぶんですけど大丈夫かな と。
ウチのサイトでは今んところ平気です。
ログイン > オンラインストア > テーマ > カスタマイズ
左下の テーマ編集 を選ぶと右カラム「SNS」の一番下に
待ちに待った Linkpopががが！！！
どうですか？
でましたか？
ちーちゃい変化ですけど 自分は満足です。
ちなみに専門の知識を持っている人がカスタマイズしているわけではありません。断言します。
なので今回のコード等を入れて何かあっても責任は一切負いかねます。
慎重かつ しっかりバックアップかけてからやってくださいね！
特にアイコン欲しがり屋さんにオススメのカスタマイズです。
ではまた。
海マルシェちくまる中の人1号