カラーミーショップのテンプレート修正『メニュー追加・プルダウン・カート位置変更』


 

ECサイト大手のカラーミーショップ。



カラーミーショップなら無料電話サポートがついてるから困った事もその場で解決

個人でネットショップを開く人から、法人のショッピングサイト運営まで多くの方が利用しています。

WEB上で完結しているサービスなのでサーバーの導入とかDLやインストールや複雑な設定も必要なく、

初心者でもログインしてテンプレートを元に簡単にオリジナルのサイトを編集したり、

それどころか決済の豊富さ、配送の代行からサポートまで運営者に優しい細かなサービスが行き届いているのも魅力です。

 

先日そんなカラーミーショップをご利用しているお客様からお問い合わせを頂きました。

ウェディング用品の販売されている ミループさんのミループオンラインストア

『テンプレートの修正したいんだけど…』

すぐに詳しいお話を伺い、

後日お客様の理想を簡単に画像で完成予定図にして送りました。

すぐに発注の返答を頂きましたので、作業開始です。

 

 

TOPページのグローバルメニューに項目を追加、その項目をプルダウン表示

 

修正前のトップページ

トップページ修正前

 

修正の要望は

  • グローバルメニューにカテゴリーを追加してもらいたい
  • カテゴリーのメニューはプルダウンでカテゴリ一覧が表示されるようにして欲しい

 

という内容でした。

 

 

メニューを追加

 

メニュー修正前

このテンプレートでのメニュー部分の作りを見たところ、表示されている画像とマウスオーバーで表示する画像が一枚になっていて、マウスオーバーするとその表示位置をずらして切り替えていることが確認できました。

 

なので、まずは画像作りから。

メニュー修正後

 

5項目に増やし、似たようなフォントでメニューを作り直しました。

 

その後、テンプレートのHTML修正で増やした項目を追加し、CSSで表示箇所を修正しました。

 

プルダウンメニュー

プルダウンメニューはHTMLでカテゴリーにさらにul li を追加して、CSSで調整。

カテゴリー部をマウスオーバーした際に、その中のliをさらに表示するようにCSSに書き込みます。

 

トップページ完成図

トップページ修正後

ほとんど修正前と変わらずにできました。

 

 

詳細ページのレイアウト変更

 

修正前のテンプレート

詳細ページ修正前

詳細ページはレイアウト変更の要望がありました

  • 商品説明とカートの位置を入れ替えて欲しい
  • 商品説明が多くなると、カートがどんどん下に下がっていく
  • 写真を追加していくとどんどん横に表示されていってしまう

 

HTML編集

こちらの詳細ページもHTMLを編集し、CSSで表示を修正しました。

また、カートに入れるボタンとサイズ詳細の画像の色を入れ替え、カートに入れるボタンを少し大きくし、ユーザーの方がよりカートに入れやすいように調整しました。

 

完成図

詳細ページ修正後

 

また、写真は大きいサムネイルの幅に合わせて4つ以上追加される場合は2段目に表示するように調整し、

カートに入れるボタンは常に右上に表示されます。

 

 

カラーミーでより売れるショップにするには…

 

カラーミーショップはサイト運営初心者にも優しくわかりやすく簡単なサイト作りをできるのが魅力ですが、

やはり経営者として、よりコンバージョン(成約)の高いレイアウトへ変更して、研究し続けることが何よりも重要です。

 

それにはやはり、テンプレートの修正は必要不可欠です。

しかし、HTMLの書き換え、CSSの調整など思った通りのレイアウトへ変更するのは

そもそもの構造を理解する必要もありますし、ファイルのバックアップなどサイト運営初心者の方が作業するには少々ハードルが高いのも実情です。

 

もし、テンプレートの修正でお困りの方いらっしゃいましたらお気軽にご相談下さい。

よりユーザーの心理と行動を考慮したレイアウト変更をご提案をいたします。

 

フリーのWEB屋だからこそできるお客様と密接した関係でのお仕事ができます。

 

完成したサイトをご覧になったお客様からは大変満足頂いたみたいで私も凄く嬉しくなりました。

お客様からのメール

 

ミループ様また何かありましたらお気軽にご連絡くださいね!!

 


Pocketに保存 はてなブックマーク Google+でシェア

 

※この記事の前後の記事

人気ブログランキングへブログランキング・にほんブログ村へにほんブログ村

コメントを残す