Skip to main content

Glimpse gives online shopping a Pinterest twist

Items are arranged in a Pinterest-style layout, with minimal text

Items are arranged in a Pinterest-style layout, with minimal text

Online shopping has been taken in a new direction following the launch of Glimpse Catalogs (opens in new tab), developed as a partnership between Microsoft and TheFind (opens in new tab).

Items are displayed in a Pinterest (opens in new tab)-style layout, with the focus on image and minimal product details. Clicking the image provides a pop-up box containing full information.

Clicking each image produces a pop-up box with full product details

Clicking each image produces a pop-up box with full product details

The site also enables you to explore catalogues from 90 retailers (opens in new tab), including Tory Burch, Land's End, and Bebe.

Clicking "Explore this catalog" lets you back and forth through the pages as you would a physical magazine, and save favourite items.

Catalogues are presented an "online magazine" format, ready to flick through

Catalogues are presented an "online magazine" format, ready to flick through

You can also sign in with Facebook to "like" or share an item on the social network, and Glimpse will curate options specifically for you based on those likes.

How they built it

Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. As part of the project, the team released the framework created as part of the development (opens in new tab), which relied heavily on Turn.js (opens in new tab), a flipbook library for JavaScript.

"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal (opens in new tab) explains. “This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse.

Social discovery is a key part of the retail strategy

Social discovery is a key part of the retail strategy

"We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet)," he continues. "We use both jQuery and custom-built JavaScript libraries in our application.”

Turn.js was used to manage the page turn effect

Turn.js was used to manage the page turn effect

Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js, an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."

Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience. "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal adds.

Product highlighting and hotspotting overlays make the pages more interactive

Product highlighting and hotspotting overlays make the pages more interactive

"Additionally we integrated product highlighting and hotspotting overlays to make the pages more interactive. Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."

Words: Jack Franklin (opens in new tab)

This showcase was originally published in .net magazine (opens in new tab) issue 233.

Now read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.