Enhanced product image display like Nike's

Highlighted
New Member
3 0 0

Hi there,

I'm trying to replicate Nike's style of displaying product images. It works by you choosing a particular style of shoe, for example, from a horizontal menu of product images. A left hand vertical menu then updates with more images of that particular shoe from different angles etc.

You can see an example here: http://store.nike.com/gb/en_gb/pd/air-zoom-vomero-12-running-shoe/pid-11236267/pgid-11840650

I'm aiming for a similar setup, but the horizontal menu that you choose from isn't linked to different variants, but it's for groups of product images in different settings. For example, on a white background, black background, and different shots of models wearing the shoes. (We sell light up shoes). So when a particular horiztonal menu image is clicked on, the vertical menu updates to display the product in a particular setting..

In order to do this each product will have 12 product images. Images 1 - 4 are the shoes on a white background, 5 - 8 are on a black background, and 9 - 12 are model shots.

I've managed to create the different menus based on if statements in the product image forloop.index statement.

Here's what I've achieved so far:

You can see that I've got the three different vertical menus on display. So, what I need to do now is display only the relevant vertical menu depending on when one of the images in the horizontal menu is clicked on.

Any ideas on how to achieve this?

Thanks in advance, 

  Gus

0 Likes
Highlighted
New Member
3 0 0

I managed to work it out. Happy to share with anyone if they're interested.

 

See attached for a screenshot of the new product display.

 

Cheers,

  Gus

0 Likes
Highlighted
New Member
1 0 0

Hey there, 
Could you please help me out here? I'm looking for the same exact UI for my product page as mentioned in your query. I use venture theme for my website. 

Thanks and regards 

0 Likes