Shopify の Debut テーマに LINE のリンクアイコンを追加する

こんにちは、 Gaji-Labo 横田です。今回は、Eコマース用のプラットフォームである Shopify によるサイト構築で、Shopify の Debut テーマに LINE へのリンクアイコンを追加する方法を紹介します。

Debut テーマに手を加えていく形での Shopify テーマ開発については、こちらの記事もご覧ください。

Shopify テーマのデフォルトスタイルと独自スタイルの CSS の共存を模索した

管理画面からフッターに LINE アイコンを表示させたい

Shopify の Debut テーマでは、フッターにソーシャルメディアアイコンを表示させる機能が実装されています。

管理画面 > オンラインストア > テーマ のカスタマイズボタンから、ホームページテンプレートのフッター > テーマ設定画面で、ソーシャルメディアの URL を挿入すると、リンク先を設定したアイコンを表示させることができます。

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 の URL 挿入ボックス
リンク先を設定した LINE アイコンを表示

まとめ

今回は、管理画面からフッターに LINE へのリンクアイコンを表示させる方法を紹介しました。liquid ファイルにベタ書きで追加することもできますが、管理画面から設定できると運用しやすいですね。国内のECサイトではソーシャルメディアに、LINE へのリンクアイコンを設定したいサイトも多いかと思いますので、Shopify テーマ開発に携わっている方々の参考にしていただければと思います。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームが前に進むためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。