ソーシャルアイコンへのリンク設定方法

ご注意：こちらはテンプレート編集（上級者モード）のご案内になります。

DISCOVERでは、2021年3月31日より、管理画面の「ショップ作成」>「ショップ情報」>トップページから、
ソーシャルアイコンを設定できるようになりました。詳しくはこちら >>
このページでは管理画面からSNSアイコン追加を行うための、既存テンプレートのアップデート方法を説明しています。

※2021年3月31日以降に追加されたテンプレートについては、以下の修正を行う必要はありません。
※2021年3月31日より前に追加されたテンプレートにて、既にご自身でソーシャルアイコンを設置されていた方はこちら

 

---

 

修正方法

1. [ショップ作成] → [デザイン] → DISCOVERの[テンプレート編集]から共通の[HTML/CSS編集]をクリック
2. 以下の通りにHTMLを編集します

HTML編集（4箇所）

■ 8行目付近

変更前

<{assign var="visible_sns_flg" value=false}>
<{if $twitter_url != "" || $facebook_url != "" || $instagram_url != "" || $google_plus_url != "" || $pinterest_url != ""}>
<{assign var="visible_sns_flg" value=true}>
<{/if}>

変更後

<{assign var="visible_sns_flg" value=false}>
<{if $twitter_url || $facebook_url || $instagram_url || $youtube_url}>
<{assign var="visible_sns_flg" value=true}>
<{/if}>

---

■ 168行目付近

変更前

<{if $visible_sns_flg}>
<ul class="l-sns-navi-list u-opa">
  <{if $instagram_url != ""}>
  <li class="l-sns-navi-list__item">
    <a href="<{$instagram_url}>" target="_blank">
      <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
    </a>
  </li>
  <{/if}>
  <{if $facebook_url != ""}>
  <li class="l-sns-navi-list__item">
    <a href="<{$facebook_url}>" target="_blank">
      <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
    </a>
  </li>
  <{/if}>
  <{if $twitter_url != ""}>
  <li class="l-sns-navi-list__item">
    <a href="<{$twitter_url}>" target="_blank">
      <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
    </a>
  </li>
  <{/if}>
  <{if $youtube_url != ""}>
  <li class="l-sns-navi-list__item">
    <a href="<{$youtube_url}>" target="_blank">
      <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
    </a>
  </li>
  <{/if}>
  <{if $pinterest_url != ""}>
  <li class="l-sns-navi-list__item">
    <a href="<{$pinterest_url}>" target="_blank">
      <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
    </a>
  </li>
  <{/if}>
</ul>
<{/if}>

変更後

<{if $visible_sns_flg}>
<ul class="l-sns-navi-list u-opa">
    <{if $instagram_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$instagram_url}>" target="_blank">
        <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
      </a>
    </li>
    <{/if}>
    <{if $facebook_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$facebook_url}>" target="_blank">
        <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
      </a>
    </li>
    <{/if}>
    <{if $twitter_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$twitter_url}>" target="_blank">
        <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
      </a>
    </li>
    <{/if}>
    <{if $youtube_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$youtube_url}>" target="_blank">
        <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
      </a>
    </li>
    <{/if}>
    <!-- <li class="l-sns-navi-list__item">
      <a href="" target="_blank">
        <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
      </a>
    </li> -->
</ul>
<{/if}>

---

■ 516行目付近

変更前

<{if $visible_sns_flg}>
    <ul class="l-footer-sns-list u-opa">
      <{if $instagram_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$instagram_url}>" target="_blank">
          <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
        </a>
      </li>
      <{/if}>
      <{if $facebook_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$facebook_url}>" target="_blank">
          <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
        </a>
      </li>
      <{/if}>
      <{if $twitter_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$twitter_url}>" target="_blank">
          <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
        </a>
      </li>
      <{/if}>
      <{if $youtube_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$youtube_url}>" target="_blank">
          <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
        </a>
      </li>
      <{/if}>
      <{if $pinterest_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$pinterest_url}>" target="_blank">
          <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
        </a>
      </li>
      <{/if}>
    </ul>
<{/if}>

変更後

<{if $visible_sns_flg}>
<ul class="l-footer-sns-list u-opa">
  <{if $instagram_url}>
  <li class="l-footer-sns-list__item">
    <a href="<{$instagram_url}>" target="_blank">
      <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
    </a>
  </li>
  <{/if}>
  <{if $facebook_url}>
  <li class="l-footer-sns-list__item">
    <a href="<{$facebook_url}>" target="_blank">
      <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
    </a>
  </li>
  <{/if}>
  <{if $twitter_url}>
  <li class="l-footer-sns-list__item">
    <a href="<{$twitter_url}>" target="_blank">
      <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
    </a>
  </li>
  <{/if}>
  <{if $youtube_url}>
  <li class="l-footer-sns-list__item">
    <a href="<{$youtube_url}>" target="_blank">
      <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
    </a>
  </li>
  <{/if}>
  <!-- <li class="l-footer-sns-list__item">
    <a href="" target="_blank">
      <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
    </a>
  </li> -->
</ul>
<{/if}>

---

■ 1行目〜6行目付近

以下を削除してください

<{* ソーシャルアカウントURL 設定 *}>
<{assign var="twitter_url" value="test"}>
<{assign var="facebook_url" value="test"}>
<{assign var="instagram_url" value="test"}>
<{assign var="youtube_url" value="test"}>
<{assign var="pinterest_url" value="test"}>

---

3. 変更しましたら、[更新]ボタンをクリック
4. サイトにアクセスして変更が反映されている事を確認します。

※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。