【STORES（ストアーズ）】ストアデザインのカスタマイズをご紹介！

こんにちは、hgmです。

今回は前回に引き続きSTORES（ストアーズ）のストアデザインのカスタマイズについてご紹介させていただきます。

既存のテンプレートでも十分ですが、アレンジすることによりそのショップらしさを出すことができます。

今回は「STANDARD」のテンプレートを使用していきます。

メニュー／レイアウト

メニュー内容

ページ上部やサイドにあるメニューの追加・削除、名前の変更、順番の入れ替えができます

カスタムリンクの追加では、任意のURLを追加することができます（3つまで追加可能）。

メニューレイアウト

PCのメニュー位置を変更することができます。

• デフォルト…上部に全てメニューがある形
• 1カラム上固定…上部にメニューを固定してスクロールしてもついてくる形
• 2カラム左…商品一覧の左側にメニューを置く形
• 2カラム左上…右上にメニュー、商品一覧の左側にカテゴリーを置く形
• 2カラム上固定…上部にメニューを固定して、ロゴのみ商品一覧の左側にカテゴリーを置く形

メインビジュアルを追加

ページ上部にメインビジュアル（画像）を追加することができます。

また複数枚追加するとスライドショーになります（最大5枚まで）。

PC表示時の横幅

PCで見たときのメインビジュアル以外の横幅を変更できます。

アイテム画像比率

商品画像の比率を正方形、横長、縦長に変更できます。

STORESロゴ（スタンダードプランのみ）

STORESのロゴの表示／非表示が変更できます。

テキスト

カラー変更とフォントの種類が変更できます。

カラーはロゴ、メニュー等のストア全体と、商品一覧の商品名の箇所を変更可能です。
フォントの種類はゴシック体もしくは明朝体が選べます。

ストアロゴ

ロゴ画像がある場合はこちらでアップロードして設定できます。
ロゴ画像がない場合はテキスト表示で英語・日本語のフォントを選択でき、大きさも調整できます。

ちなみにロゴ画像はストアーズのロゴメーカーのほか、外部サービスでも作成できます！

こちらもおすすめ!!

ゆにメモ

ロゴ作成に迷ったら...? ブラウザ上で無料でロゴが作成できるオススメサイト

https://blog.universe-web.jp/5758

こんにちは、stoです。デザインをやっている方はロゴのデザインをしたりもすると思いますが、ロゴ作成に慣れていない方はロゴのアイデアさえも出にくい事があると思います。 また、デザインをやられていない方でもロゴを提案する際にちょっとしたロゴのアイデアを見せたい時もあると思います。そんな時に役に立つのがブラウザ上でロゴを簡単に制作できるロゴ作成サイト。今回は、その簡単に制作できるロゴを無料で作成できるロゴのサイトをいくつか紹介します。  ブラウザ上でロゴを作成できるサイト Logo Garden&...

STORESのロゴメーカーで作ったロゴを設置してみました！

背景

背景画像を変更できます。

単色のほか、デフォルトでおしゃれなパターンが複数用意されています。

オリジナルではお持ちのパターン画像を登録することができます。

パーツ編集

特定の場所に下記コンテンツを入れることができます。

• バナー
• コラム
• 区切り線
• ギャラリー
• 動画
• アイテム
• カテゴリー
• ランキング
• ニュース

バナー

バナー（画像）を入れることができます。

お知らせやイベント等の画像を入れるのにぴったりですね！

1枚（1880×360px程度）／2枚（900×360px程度）／3枚（600×360px程度）のパターンが選べます。

バナー画像はSTORES Galleryでテンプレートを探すことができます！

コラム

文章のみ、または文章と画像（900×400px程度）を追加することができます。

区切り線

区切り線を追加することができます。

コンテンツ間で区切りたいところに入れると見やすくなりそうですね！

ギャラリー

大きめの画像を表示させることができます。

複数枚登録するとスライドショーになります。

動画

YouTubeかVimeoの動画URLを入れることで動画を表示できます。

アイテム

商品一覧を追加することができます。

「種類」は新着、カテゴリー、カスタマイズが選べ、6商品まで掲載可能です。

• 新着…新着商品の一覧
• カテゴリー…あらかじめ作成したカテゴリーの商品一覧
• カスタマイズ…任意の商品を選択した一覧

「レイアウト」では6パターンの種類から選べます。

• 1…1列表示
• pc2 / mobile1…PCは2列、スマートフォンは1列
• pc3 / mobile2…PCは3列、スマートフォンは2列
• pc4 / mobile2…PCは4列、スマートフォンは2列
• pc6 / mobile3…PCは6列、スマートフォンは3列
• 1 + 2…1つ目の商品は大きく1つ表示で、以降は2列表示

「表示」のアイテム名、フレームはチェックを外すと非表示になります。

カテゴリー

あらかじめ作成されたカテゴリーの一覧を表示できます。

カテゴリーの背景画像は、青の写真マークを押して画像アップロードか商品を選択して変更することができます。

ランキング

ストア内の人気ランキングを掲載することができます。

お知らせ

ニュースを表示することができます。

ニュースはダッシュボードのメニュー「機能を追加」>「ニュース」をONにすることでお知らせの作成ができるようになります。

追加後、ダッシュボードのメニューに「ニュース」から作成したものが表示されます。

まとめ

ストアデザインのカスタマイズ機能についてご紹介しました。

デフォルトは最小限でシンプルな状態なので、カスタマイズしてより魅力的なショップにしましょう！