No announcement yet.

Product detail page overhaul almost done - opinions?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Product detail page overhaul almost done - opinions?

    I've spent the last several weeks (really only a handful of hours, I've been busy actually running my site) redesigning the product detail page. As you guys know the 3DC template system relies heavily on html <tables> that are nested in the dozens, and the code doesn't validate without many many errors.

    Since the product detail page is the most common one on our site (we have over 30,000 products) I wanted it to be coded right. Completely CSS-based design. Only a couples tables used where tabular data is called for. And the page validates HTML 4.01 strict with no errors and no warnings.

    All I have to do is bring in the last couple of minor features (multiple ship to, related items) and tweak the layout and I'll be done.

    Any feedback would be appreciated. Also, consider this a proof of concept that this CAN be done with the 3DC templating system. :D

  • #2
    I think it is awesome. Very clean. I would sure love to look through your listing template to see how you did it.


    • #3
      Yes, very nice indeed.
      Category page looks good as well.

      I think you should market the product page template. You'd have a number of included.


      • #4
        I appreciate the comments. Since the original post I've overhauled virtually every page on my site. After finishing the product detail page I tackled the View Cart page (add the previously-linked item to the cart and check it out. I particularly like the effect of the 'Click for Help' link)

        After View Cart I did the entire checkout process. Once I finished that, the rest of the template pages were easy. It was almost entirely just a matter of reusing code I had designed during the first phase.

        A few features..
        - The entire site validates HTML 4.01 strict with only one error - that one error is caused by a header tag for Facebook integration. Oh well.
        - The layout of the whole site is done in a modern way with <divs> and CSS. This makes repositioning and changing the look of specific elements a breeze. It will also look better to search engines. (There are a couple spots that I use the default <table> layout. Most noteable the "Prev 1 2 3 4 5 Next" page links on categories. That section is almost impossible to edit)

        - The average page size is reduced by 30-40%, which will give me a nice bandwidth savings.
        - I particularly like the buttons (as seen on the product detail page). Notice the rounded corners, background gradient, drop shadow, and "push down" effect when you mouse over. This is purely CSS3+HTML, no images or javascript. It won't look as fancy in Internet Explorer (less than 9), but it will look fine for those users, and the other 60% of the internet will get nice buttons that use almost no resources.

        If anyone is interested in using some of my code I would be happy to work with you for a very reasonable price. Send me a private message.


        • #5
          Very nice! Clean, sharp, informative.

          Address Plaques, Memorials, Home & Garden Decor, Gifts and more.


          • #6
            Ok, so now I have two sites I need to work on! Thanks for the info and help. I can see where your coding saves a ton of bandwidth. I am going to stop what I was working on and learn to do this with CSS and start my new site over then when that is done rework our current site with CSS.

            Once I understand CSS better I'll be in contact about the coding.



            • #7
              The product page is pretty decent. A little bland but the layout is pretty good. Just remember that even the simplest things can detour a customer. Like the difference between having to look in a zig zag fashion for information compared to looking straight up and down. A very small thing that can have a very big effect. I know you were just asking for opinions on the product page but I can't help look around a site when opinions are requested.

              So here are a couple of notes:
              1.Keep Sub Categories down to 2-3 Max per main category if possible. (there is nothing worse than having a customer say "why have I clicked 4 times just to see an item and its still not there") or just click option to show products in main and sub cats so there are always products to see.
              2.Make use of the Custom File Names option.
              3.Be sure you have a way to implement the additional keywords option.
              4.Resize your thumbnails to around 250x250.

              Don't take this as a negative comment. You have done some great work especially with the coding. Kudos


              • #8
                I have spent several hours on the form looking at what other users have done with their sites and I have to say to you......EXCELLENT WORK!

                I sent you a P.M.