No announcement yet.

Rockin' Product Page FTW

  • Filter
  • Time
  • Show
Clear All
new posts

  • Rockin' Product Page FTW

    So over the last 3 days I've been redesigning one of our sites, I've finished the homepage and some main category designs, and I just wrapped up the product page template. As far as I can tell it's pretty rockin', but maybe I'm biased towards my own creations :)

    Anyway check it:

    I'm using the "dropimage" option in the product so that the picture changes based on your option selection, but instead of having a separate one I ripped out the original "image" code and popped an enhanced dropimage one in there. Neat huh?

    Additionally, clicking "view in action" toggles open an embedded DIV with the youtube flash element configured to fit nicely right where the dropimage used to be. Click "view images" to go back to the dynamic dropimage, no new loading required!

    There are some other neat tricks like the cross-browser dropdown navigation, rollover bordered images and an animated logo image, but I think the toggling video dropimage thing is most impressive.

    Point being, what do you think?!?! (I seek the approval of the masses)
    :) thnx!

  • #2
    I think it is great. I definitely like how when you change your option, the main picture changes. I have always like this on websites.


    • #3
      Really quick, you should change the title of your site when you get a chance, because it says "asdf"

      I like the drop down menu you used. Did you have to code each link manually?

      Your animated logo is nice too

      Last edited by andres.choi; 02-20-2009, 02:02 PM.


      • #4
        That page is just for testing (originally the product name was "it's a thing!" lol) so the title is just gibberish.

        Are you talking about the top bar menu? The HTML for that is simply list tags "<li>" and manual links to various pages. The animation, looks and what not are all controlled by external javascript and css styles. For the product dropdown that selects the color, that's all part of 3dCart's "dropimage" option, really easy to set up.


        • #5
          Very, very nice! I especially like the way you configured the dropimage option. I'm in the process of completing a redesign on one of our sites and am adding a drop-down menu (using Project Seven's Dreamweaver extension).

          I also love your animated logo with the various color changes.