SWELLでECサイトを作る方法｜カスタマイズ例を解説

私自身、SWELLを使ってハンドメイド販売サイトを製作しました。

実際のカスタマイズ例を解説していきます！

＼「SWELL」の詳細をみる／

SWELLでECサイトを作る方法

WordPressテーマのSWELLを導入しただけではECサイトを作ることはできません。

「SWELL」でECサイトを作るためには、以下のいずれかの方法を選択する必要があります。

セキュリティー面を考えると、「②BASEやSTORESと連携させる方法」がおすすめです。

詳しくは以下の記事を参考にして下さい▼

BASEとSTORESの違いについては以下の記事を参考にして下さい▼

SWELLを使ったECサイト例

私は、STORESと連携させる方法でECサイトを作りました。

詳しい連携方法は以下の記事を参考にして下さい▼

試行錯誤して自分なりにカスタマイズしてみたので、カスタマイズ方法を紹介します。

まず、実際に製作したサイトは以下です▼

 トップページのカスタマイズ

ヘッダー

 グローバルメニューの中の商品一覧には子メニューを付けることで、カテゴリー別に商品を探しやすいようにしました。

 ヘッダーはスクロール時の追従の有無が選べますので、自身のサイトに合わせて設定できます。

通常時▼

追従ありのスクロール時▼

 スマホ時は左にハンバーガーメニュー、真ん中にロゴ、右に検索アイコンになります▼

ヘッダーの詳しい作り方は、以下の記事を参考にして下さい▼

メインビジュアル

メインビジュアルは商品画像を設定し、画像の上に店名とキャッチフレーズを重ねました。

画像の上にはキャッチフレーズではなく、ボタンを重ねることも可能です。

また、メインビジュアルの画像のサイズは自由に変更でき、複数の画像をスライドにすることや、動画を入れることもできます。

メインビジュアルの詳しい作り方は、以下の記事を参考にして下さい▼

固定背景

ABOUTのブロックは、大理石柄の固定背景にしアクセントをつけました。

固定背景は簡単に設定できますし、オーバーレイの設定も可能です。

カラム＆ボタン

ITEMのブロックは3カラムにし、商品カテゴリーを分かりやすくデザインしました。

SWELLはボタンの種類が豊富なので、使い分けができ便利です！

フッター

フッターには、インスタとお問い合わせのアイコンを設置しました。

TwitterやYouTubeなどのSNSアイコンも設置可能です。

 商品一覧ページのカスタマイズ

商品一覧

カテゴリーを作り、商品を探しやすくしました。

また、商品はシリーズごとに並べました。

サイドバー

 商品ページのカスタマイズ

購入ボタン

STORESの機能である購入ボタンを利用しました。

お客様がこのボタンを押すことで、STORESのショップカートに商品が入ります。

STORESの購入ボタンの設置方法は以下の記事を参考にして下さい▼

スクロール表示

商品の詳細写真は、スクロールで表示させました。

リッチカラムを使えば、複数枚の画像をスクロール表示させることができます。

ボックスメニュー

商品一覧ページではボックスメニューをサイドバーに表示させていましたが、

商品ページはサイドバーなしで大きく表示させたいと思い、商品ページは下段に設置しました。

ボックスメニューの作り方は以下の記事で紹介しています▼

 FAQページのカスタマイズ

FAQ

よくある質問をQ＆A形式でまとめました。

ECサイトにあるようなFAQページも簡単に作れます。

 お問い合わせページのカスタマイズ

STORESとの連携

お問い合わせページは、ページ自体は作っていません。

カスタムリンクという機能を使って、STORESのお問い合わせページのリンクを張りました。

サイトのカラーをSTORESのショップの背景色と合わせておくと、統一感が出て良いです。

まとめ

今回は、SWELLでECサイトを作る方法とカスタマイズ例について解説しました。

SWELLでECサイトを作る方法は以下です。

BASEやSTORESと連携させる方法であれば、セキュリティー面でも安心できます。

WordPressテーマ「SWELL」を使ったカスタマイズ例も参考にしていただければ幸いです。

＼「SWELL」の詳細をみる／