SHELFでは、2021年3月31日より、管理画面の「ショップ作成」>「ショップ情報」>トップページから、
ソーシャルアイコンを設定できるようになりました。詳しくはこちら >>
このページでは管理画面からSNSアイコン追加を行うための、既存テンプレートのアップデート方法を説明しています。
※2021年3月31日以降に追加されたテンプレートについては、以下の修正を行う必要はありません。
※2021年3月31日より前に追加されたテンプレートにて、既にご自身でソーシャルアイコンを設置されていた方はこちら
2. 以下の通りにHTMLを編集します
変更後
4. サイトにアクセスして変更が反映されている事を確認します。
※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。
ソーシャルアイコンを設定できるようになりました。詳しくはこちら >>
このページでは管理画面からSNSアイコン追加を行うための、既存テンプレートのアップデート方法を説明しています。
※2021年3月31日以降に追加されたテンプレートについては、以下の修正を行う必要はありません。
※2021年3月31日より前に追加されたテンプレートにて、既にご自身でソーシャルアイコンを設置されていた方はこちら
修正方法
1. [ショップ作成] → [デザイン] → SHELFの[テンプレート編集]から共通の[HTML/CSS編集]をクリック2. 以下の通りにHTMLを編集します
HTML編集
■ 470行目付近
変更前
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<{* <a href="リンク先URL">へ該当URLを設置してご利用下さい。 *}>
<{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}>
<ul class="sns-list">
<li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pinterest-p fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
変更後
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<ul class="sns-list">
<{if $twitter_url}>
<li class="sns-list__unit">
<a href="<{$twitter_url}>" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<{/if}>
<{if $instagram_url}>
<li class="sns-list__unit">
<a href="<{$instagram_url}>" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<{/if}>
<{if $facebook_url}>
<li class="sns-list__unit">
<a href="<{$facebook_url}>" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<{/if}>
<{if $youtube_url}>
<li class="sns-list__unit">
<a href="<{$youtube_url}>" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<{/if}>
<!-- <li class="sns-list__unit">
<a href="">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pinterest-p fa-stack-1x fa-inverse"></i>
</span>
</a>
</li> -->
</ul>
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
3. 変更しましたら、[更新]ボタンをクリック4. サイトにアクセスして変更が反映されている事を確認します。
※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。
