Parallax Product Window

Definition: The main section on a webpage that showcases a product or service utilizing the Parallax effect.

When customers view your website for the first time there are two things that effect if they purchase your product. The first is the product itself, does it have the right specs, is it affordable, etc... The second is the experience of discovering the product and learning more about it. This includes: website ease of use, video explanation of the product, verbiage used in the description and what this article is about - the Product Window. To optimize your sales revenue, both product and experience should evoke a sense of desire in your customer. In this article, I will explain how to utilize the Parallax Product Window and Parallax effect to improve your customer's experience when discovering your product.

Parallax Product Window Examples

Customers instinctively drag their mouse over a product image (a.k.a Product Window) when they want it. The experience you receive when you drag your mouse over a Product Window is a lot different when it uses Parallax. Below are examples of how users can create more interesting product selling pages by utilizing Parallax Product Windows:

Parallax Product Window iFrame Template

We have created an easy to use plug and chug template for anyone that wants to use the Parallax Product Window. Here it is below. To add it I copy and pasted four lines of code.


Pros & Cons

Your "Brand" should shine through when you show off your product. If you're Hot Topic, use a graffitied wall behind your models, if you are Hollister, put an ocean behind your models, If you are UnderArmor, put cheerleaders and the stadium behind your models, if you sell dog food, put a dog running at the doggy bowl, etc..

The defining moment of choice is when your customer looks at your Product through the "Product Window" and decides if it is worth it. Having a boring white stock background is communicating to your customer, well... nothing. Having a parallax background communicates: your "Brand", the "Feel" of the product, and your high level of competency regarding technology.

I do not know why companies use Stock Photos to sell their product (that's so 2010). I guess it is just easier. But you do not want easy, you want money, so that is why all your products will use Parallax Windows.

I think of it like solving a Rubik's cube, everyone can get one or two sides. However, the steps that it takes to solve the Rubik's cube are a little too complex for the average person. It is the same with parallax Product Windows. You have to put a little too much thought into the coding of the Parallax Product Window, so people just do not do it. They might hire a model to showcase the clothes, or they will include a zoom-in feature into the photo, but they never dive deep enough. They only solve a side of the Rubik's cube. No one is ever impressed with that.

Parallax Windows are not for everyone though, let us take a deeper look at the Pros and Cons of using a Parallax Window in your website.

Parallax Windows Pros:
--Improve customer experience
--Help establish "feel" of brand
--Makes a product/website stand out

Parallax Windows Cons:
--Coding much more complex
--Includes: HTML, CSS, JS, JQuery
--Not easy to update/change
--Loading times are longer

Websites that utilize a lot of changing product images like Amazon or Target probably should not include Parallax Windows in their website. However, if your product line does not change often then Parallax Windows are a must. Look at Apple, the Apple Watch product webpage is a great example of utilizing Parallax to its full potential.