makeshopの「comlate」のフッターにSNSアイコンを表示させるカスタマイズ | hiroffice EC design | makeshop・Shopify・カラーミーショップのECサイト制作、ホームページ制作

こんにちは、hirofficeです。

今回も前回に引き続きmakeshopのテンプレート「complete」のデザインカスタマイズをご紹介していきます。

↓前回までの記事

makeshopの「comlate」のメインビジュアルスライドを横幅いっぱいで表示させるカスタマイズ

makeshopの「comlate」のトップページ見出しを少しおしゃれにするカスタマイズ

makeshopの「comlate」の特定のカテゴリーページ上部に画像やテキストを表示させるカスタマイズ

今回は、サイトの最下部(フッター)に各SNSアイコンを追加する方法をご紹介します！

既存顧客もしくは見込み顧客へのアプローチのためにもEC→SNSへの動線は作っておいたほうが良いので、SNS発信を積極的にされているショップ様は参考にしてみてください。

やり方

①

まず活用されているSNSのアイコンを用意します。

SNSアイコンは icon-rainbow のようなフリーアイコンサイトで入手いただくか、canva でお好みのアイコン(無料版)を探していただくと無料で手に入ります。
※png形式の背景透過画像をご用意ください。

②

メインメニュー / ショップデザイン / ストレージ / 100MBサーバ使用 / ギガプラス10 へ用意いただいたアイコンをアップロードしていきます。

※初めてギガプラス10を使用する場合は最初にパスワードを設定してください。

③

ショップデザイン > 編集するデザインセットの編集ボタン > モジュール管理 > フッターの3行目<div class=”footer”>の上

に以下のコードを追加します。

<ul class="footer-sns">
        <li><a href="リンク先のURL"><img src="アップロードした画像パス" alt="facebook"></a></li>
        <li><a href="リンク先のURL"><img src="アップロードした画像パス" alt="instagram"></a></li>
        <li><a href="リンク先のURL"><img src="アップロードした画像パス" alt="x"></a></li>
</ul>

「リンク先のURL」は遷移先の各SNSのURLに、アップロードした画像パスには先程アップロードした画像のURLに差し替えてください。

アップロードした画像のURLは、ギガプラス10画面で該当の画像を右クリック > 情報 > パスに記載されているURLをそのままコピーして貼り付けていただけば大丈夫です。

④

ショップデザイン > 編集するデザインセットの編集ボタン > 全ページ共通CSSの725行目

に以下のコードを追加します。

.footer-sns {
    list-style: none;
    margin: 0px auto;
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    max-width: 500px;
}
.footer-sns img {
    width: 35px;
}

するとこのように↓SNSアイコンが表示されました！