Product Builder

JavaScript

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

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

Product Builder

デモ

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

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

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

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

Product Builder

関連記事

  1. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  4. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  5. Erge Drop Down Menu Control
  6. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP