SNSアイコンの設置方法

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

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

---

修正方法

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

HTML編集

■ 652行目付近

変更前

<{* ソーシャルリンク *}>
<div class="text-center footer_section">
<ul>
<li>
<a href="#"><img src="https://img.shop-pro.jp/tmpl_img/68/social_twitter_2x.png" /></a>
</li>
<li>
<a href="#"><img src="https://img.shop-pro.jp/tmpl_img/68/social_instergram_2x.png" /></a>
</li>
<li>
<a href="#"><img src="https://img.shop-pro.jp/tmpl_img/68/social_facebook_2x.png" /></a>
</li>
</ul>
</div>
<{* //ソーシャルリンク *}>

変更後

<{* ソーシャルリンク *}>
<{if $twitter_url || $instagram_url || $facebook_url || $youtube_url }>
<div class="text-center footer_section sns-lst">
<ul>
<{if $twitter_url}>
<li>
<a href="<{$twitter_url}>"><img src="https://img.shop-pro.jp/tmpl_img/68/social_twitter_2x.png" /></a>
</li>
<{/if}>
<{if $instagram_url}>
<li>
<a href="<{$instagram_url}>"><img src="https://img.shop-pro.jp/tmpl_img/68/social_instergram_2x.png" /></a>
</li>
<{/if}>
<{if $facebook_url}>
<li>
<a href="<{$facebook_url}>"><img src="https://img.shop-pro.jp/tmpl_img/68/social_facebook_2x.png" /></a>
</li>
<{/if}>
<{if $youtube_url}>
<li>
<a href="<{$youtube_url}>"><img src="https://img.shop-pro.jp/tmpl_img/68/social_youtube_2x.png" /></a>
</li>
<{/if}>
</ul>
</div>
<{/if}>
<{* //ソーシャルリンク *}>

---

CSS編集

以下を追加してください

/* sns */
.sns-lst {
list-style: none;
margin-top: 2em;
}
.sns-lst li{
display: inline-block;
width: 24px;
margin-right: 8px;
}
.sns-lst li:last-child{
margin: 0;
}
.sns-lst li img{
width: 100%;
}

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

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