Product Builder

JavaScript

カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

Product Builderは、カスタマイズ性に優れたオンラインストアに役立つショッピングツールです。レスポンシブにも対応しているので、パソコンからスマホまでさまざまなデバイスで見やすくレイアウトされます。オンラインショッピングの際に、オプションをたくさん選択する必要がある製品などに活用できますね。

Product Builder

デモ

デモページにアクセスすると、画面上の方に、MODELS、COLORS、ACCESSRIES、SUMMARYという項目が表示されています。まずは車のMODELS(車種)を選択しないと、それ以降に進めない仕組みになっています。

MODELSを選択すると、右下にある「COLORS」というボタンが黄色に変化。ここをクリックすると、今度は車のカラーを選択する画面が表示されます。ちなみに、上部のメニューから「COLORS」を選んでも同じ画面に行くことができます。

COLORSの次は、ACCESSORIES、最後にSUMMARY、という流れで画面が切り替わっていきます。

このように、Product Builderを使うことで、カスタマイズしながら購入する製品を決めていくページをつくることができるわけです。単純に購入ボタンを押せば完了する製品ではなく、カラーを選んだりオプションを決めたりと、最終的な購入まである程度ユーザーが選択しなければいけない製品ページに最適なツールといえますね。

Product Builder

justContext.jsシンプルなコンテキストメニューを実装できる「justContext.js」前のページ

レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」次のページSlyder

関連記事

  1. LC Micro Slider
  2. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  3. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  4. Babylon Grid
  5. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP