Shopifyストア「French cake shop」(デスクトップ)

記事
ビジネス・マーケティング
こんにちは♪

Shopifyで作成した「French cake shop(デモストア)」をご紹介します。

今回使用した無料テーマNarrative(Warm)は、主に
・ブランディングを意識したい
・商品数が少なめ
の運営者さまにおすすめです。

このブログが皆さまのストアづくりの参考になればうれしいです!

※デスクトップ(パソコン)から見た画面で説明をします。
※ポートフォリオにも掲載します。

ストア名:French cake shop(デモストア)

設定:実店舗のあるケーキ店のオンラインストア。フランスで修業をしてきたパティシエが、こだわりの果物を使用したケーキを全国に届けている。

テーマ:無料テーマNarrative(Warm)

画像:複数のフリー画像サイトから使用

作成のポイント:
デフォルトデザインをカスタマイズし、お店のファンを増やせるように魅力を伝えています。ブログに実店舗のお知らせを掲載して公式HPの役割を持たせたり、About usページでお店のストーリーを発信するなど“世界観”を大切にしました。

トップページ


top.png


トップページの左上は三本線(メニュー)です。
真ん中はストアのロゴ、右上はカートマークです。
大きく写真が入るので、ここでストアのイメージを強く表現することができます。

topメニュー.png


三本線(メニューボタン)をクリックすると、こちらのメニューが表示されます。
メニューの内容や順番は自由に決めることができます。


topアバウトアス.png


トップ部分のすぐ下に、About Usへのリンクを貼ることができます。
これもブランディング強化をしやすいポイントです。

LINEが動くのですが、とてもおしゃれです。


スライダー.png


左に固定画像、右側にスライドでおすすめの商品を紹介することができます。
左側の画像が大きいので、ストアの魅力を伝えることが可能です。
スライド枚数は選択できます。

モバイルから見ると、まず左の画像が表示され、扉を開くような形で右のスライドが現れます。左画像はとても大切です。


top説明.png


スライダーの下はストアや商品のこだわり、ストーリーを載せられるスペースです。


top下部.png


おすすめの商品を掲載できるスペースです。
即購入可能なので、お客さまにぜひ購入して欲しい商品を載せると良いと思います。


topブログ抜粋.png


おすすめ商品とフッターの間に、ブログ抜粋を入れています。
縦幅を長めにとる仕様のため、抜粋する文章は短めがおすすめです。
(ブログ冒頭に“特に読んでもらいたい内容”を書くと良いと思います)

topフッター.png

トップページのヘッダーです。
必要なものがスッキリとおさまっているイメージです。
フッターメニュー内容は必要な物を追加・削除可能です。

商品ページ



商品ページ.png

商品ページの上部です。
商品テキストが長い場合、テキストがスライドされ、左の「カートに追加する」「今すぐ購入」「SHARE」ボタンは固定されます。


商品ページ2.png


商品ページ下部です。
無料アプリProduct Reviewsでカスタマーレビューを入れています。

カートに追加


カートに追加.png


カートに追加する→カート画面です。


カート情報入力画面.png

カート情報入力画面です。

コレクション


すべてのコレクション.png


コレクション一覧画面です。

コレクションmini.png

コレクションに入ると、商品一覧画面になります。

ブログ


ブログ一覧.png


ブログ一覧画面です。


ブログ記事.png


ブログ記事画面です。
SNSボタンがすぐ押せるので、読んですぐにシェアして頂きやすいです。
文章に「シェアお願いします!」と入れると効果的です。

記事の上部に大きく写真が表示されてブランディングしやすいので、ストアのイメージに合った写真を設置するのがおすすめです。

お問い合わせ

お問い合わせ1.png


お問い合わせ2.png


お問い合わせページ上部です。
無料アプリPageFly Advanced Page Builderで作成しています。
(アプリを使わなくても作成可能です)

About us


Aboutアス1.png

Aboutアス2.png

Aboutアス3.png


お問い合わせページ同様、無料アプリPageFly Advanced Page Builderで作成しています。
(アプリを使わなくても、ページ追加で作成は可能です)

3つめの画像はスクロールしているので、上部にロゴやメニュー、カートがついてきています。

ティザーサイト


デスクトップティザー.png


ストアオープンの前にティザーサイトを作成し、広告宣伝として使うことができます。
アプリなしでデフォルトテキストなどを編集して、上のページをつくりました。

文字数によってデスクトップ(パソコン)とモバイルでの表示が変わってしまうので、よく見比べながら作成するのがおすすめです。

以上となります。

Shopify無料テーマNarrative(Warm)で作成したデモストアをご紹介してきました。

テーマはいつでも変更可能なので、作成中にいろいろ試してみてピンときたものを採用するというスタイルでも良いと思います。

Shopifyに関して不明な点や疑問点がございましたら、お気軽にご相談くださいませ。

この記事が、皆さまのお役に立てれば幸いです!




サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら