Product page layout (space below image)

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
User avatar
igavemybest
Captain (CAPT)
Captain (CAPT)
Posts: 388
Joined: Sun Apr 06, 2008 5:47 pm

Product page layout (space below image)

Post by igavemybest » Wed Jul 21, 2010 5:44 pm

There are a few things I am interested in. The first being the following. The space below an image....

Image

(1)
I understand that I have a bunch of stuff off to the right which is making it get longer below the image...this isnt the case however on Amazon.com. Would there be a solution anyone is aware of to implement something instead like what they have below the image. Instead of just haveing the text "more images" actually having the more images available below and display as the main image when hovered over?

Image

(2)
Also, to the right, the swatches are smaller images...I think thats a cool feature. For example, upload an image for a varient, then have the option to make a swatch from the image. It would also be nice to assign a name to the varients besides what shows up in the dropdown list (basically the name asigned to the varient would be displayed in the receipt correctly identifying what they purchased) and having an amazon-ish varient selection. Any thoughts, suggestions, free code?

(3)
Price. when you have varients...well, with us prices can range from $200-$4500 on the same item depending on what model they get. Isnt there some way to display the price as on Amazon? Such as "Price: $200 - $4500". Whereby the code selects the lowest and highest price and displays it? While I am on wishful thinking a dynamically generated pop-up pricing and availability chard with an "add to cart" button next to each would be nice too!

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Product page layout (space below image)

Post by mazhar » Thu Jul 22, 2010 4:41 am

(1)
I understand that I have a bunch of stuff off to the right which is making it get longer below the image...this isnt the case however on Amazon.com. Would there be a solution anyone is aware of to implement something instead like what they have below the image. Instead of just haveing the text "more images" actually having the more images available below and display as the main image when hovered over?
Read following thread it might be helpful.
viewtopic.php?f=47&t=7739
(2)
Also, to the right, the swatches are smaller images...I think thats a cool feature. For example, upload an image for a varient, then have the option to make a swatch from the image. It would also be nice to assign a name to the varients besides what shows up in the dropdown list (basically the name asigned to the varient would be displayed in the receipt correctly identifying what they purchased) and having an amazon-ish varient selection. Any thoughts, suggestions, free code?
This will probably require some customization. Adding custom fields to variants could be a tricky job. You may create your custom table to hold these values and then join it with variants table. For generating images from uploaded main image, I think you can already do that. When uploading an image for variant choice select Standard sizes option in image upload page then it will automatically create thumbnail and swatch version of uploaded file.
(3)
Price. when you have varients...well, with us prices can range from $200-$4500 on the same item depending on what model they get. Isnt there some way to display the price as on Amazon? Such as "Price: $200 - $4500". Whereby the code selects the lowest and highest price and displays it? While I am on wishful thinking a dynamically generated pop-up pricing and availability chard with an "add to cart" button next to each would be nice too!
Try changing content scriptlet of product details page from Show Product 1 to Show Product With Option Grid. This will list all available variants in a list format on product details page with Add To cart button.

Post Reply