ソーシャルアイコンへのリンク設定方法
ご注意：こちらはテンプレート編集（上級者モード）のご案内になります。
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. サイトにアクセスして変更が反映されている事を確認します。
※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。
