Shopify の Debut テーマに LINE のリンクアイコンを追加する
こんにちは、 Gaji-Labo 横田です。今回は、Eコマース用のプラットフォームである Shopify によるサイト構築で、Shopify の Debut テーマに LINE へのリンクアイコンを追加する方法を紹介します。
Debut テーマに手を加えていく形での Shopify テーマ開発については、こちらの記事もご覧ください。
Shopify テーマのデフォルトスタイルと独自スタイルの CSS の共存を模索した
管理画面からフッターに LINE アイコンを表示させたい
Shopify の Debut テーマでは、フッターにソーシャルメディアアイコンを表示させる機能が実装されています。
管理画面 > オンラインストア > テーマ のカスタマイズボタンから、ホームページテンプレートのフッター > テーマ設定画面で、ソーシャルメディアの URL を挿入すると、リンク先を設定したアイコンを表示させることができます。
同じように管理画面からリンク設定し、アイコン表示が出来るように LINE を追加していきます。
schema の編集
まず、管理画面での設定用に、schema（スキーマ）を編集します。config/settings_schema.json を開くと1106行目辺りからソーシャルメディアを設定する記述が始まりますので、Twitter や Facebook 等と同じように記述を追加します。
},
{
"type": "text",
"id": "social_line_link",
"label": {
"cs": "LINE",
"da": "LINE",
"de": "LINE",
"en": "LINE",
"es": "LINE",
"fi": "LINE",
"fr": "LINE",
"it": "LINE",
"ja": "LINE",
"ko": "LINE",
"nb": "LINE",
"nl": "LINE",
"pl": "LINE",
"pt-BR": "LINE",
"pt-PT": "LINE",
"sv": "LINE",
"th": "LINE",
"tr": "LINE",
"vi": "LINE",
"zh-CN": "LINE",
"zh-TW": "LINE"
},
"info": {
"cs": "https:\/\/line.me\/shopify",
"da": "https:\/\/line.me\/shopify",
"de": "https:\/\/line.me\/shopify",
"en": "https:\/\/line.me\/shopify",
"es": "https:\/\/line.me\/shopify",
"fi": "https:\/\/line.me\/shopify",
"fr": "https:\/\/line.me\/shopify",
"it": "https:\/\/line.me\/shopify",
"ja": "https:\/\/line.me\/shopify",
"ko": "https:\/\/line.me\/shopify",
"nb": "https:\/\/line.me\/shopify",
"nl": "https:\/\/line.me\/shopify",
"pl": "https:\/\/line.me\/shopify",
"pt-BR": "https:\/\/line.me\/shopify",
"pt-PT": "https:\/\/line.me\/shopify",
"sv": "https:\/\/line.me\/shopify",
"th": "https:\/\/line.me\/shopify",
"tr": "https:\/\/line.me\/shopify",
"vi": "https:\/\/line.me\/shopify",
"zh-CN": "https:\/\/line.me\/shopify",
"zh-TW": "https:\/\/line.me\/shopify"
}id は social_line_link とし、label は各言語共通で LINE、info は URL 例を設定します。
settings_data の編集
次に config/settings_data.json を開くと369行目辺りからソーシャルメディアを設定する記述がありますので、こちらもTwitter や Facebook 等と同じように記述を追加します。
schema で設定した id です。
"social_twitter_link": "",
"social_facebook_link": "",
"social_pinterest_link": "",
"social_instagram_link": "",
"social_tumblr_link": "",
"social_snapchat_link": "",
"social_youtube_link": "",
"social_vimeo_link": "",
"social_line_link": "", //追加LINE アイコンの追加
LINEアイコンを追加します。今回はFont AwesomeというWebアイコンフォントサービスからLINE アイコンの SVGをダウンロードしました。
ダウンロードしたSVGファイルは 、既に存在する他のソーシャルメディアアイコン同様、snippets/ ディレクトリに保存します。ファイル名は他と合わせて icon-line.liquid とします。
SVGファイルの svg要素を、他の svg ファイル同様に以下のように編集します。
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 448 512">liquid の編集
sections/footer.liquid を開くと、28行目からソーシャルメディアリンクの条件分岐の記述がありますので、Twitter や Facebook 等と同じように LINE リンクの記述を追加します。
{%- if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_snapchat_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_line_link != blank //追加
...また、237行目にソーシャルメディアの変数宣言がありますのでこちらにも LINE を追加します。
{%- assign socials = "Twitter Facebook Pinterest Instagram Tumblr Snapchat YouTube Vimeo LINE" | split: ' ' -%}設置完了
これで管理画面から、LINE リンクを挿入すると、リンク先を設定したアイコンを表示させることができるようになりました。
まとめ
今回は、管理画面からフッターに LINE へのリンクアイコンを表示させる方法を紹介しました。liquid ファイルにベタ書きで追加することもできますが、管理画面から設定できると運用しやすいですね。国内のECサイトではソーシャルメディアに、LINE へのリンクアイコンを設定したいサイトも多いかと思いますので、Shopify テーマ開発に携わっている方々の参考にしていただければと思います。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
