product page design

Can anyone let me know if i can achieve a similar look to the attached jpeg within zencart.

Thanking in advance.

Certainly you can.
It will require some moving of elements in tpl_product_info_display.php, styling in the stylesheet, and an HTML table and styling tags in the product description.

If you want things like the list of sizes and material composition to be dynamic, you will need to add some database fields and the code to handle them.

so how does one go about doing so, which codes need altering. Thanks

Sorry, I have to leave now for the evening. There are others who can help as well or better, and hopefully one will step in. I'll check in when I can.

take it no one else can advice

lucianman:

so how does one go about doing so, which codes need altering. Thanks

Have you opened up includes/templates/your_template/templates/tpl_product_info_display.php?

That page is nicely sectioned off. You'll find sections that are kind of like this:

CODE HERE

You can basically copy and paste things where you want it. So you want PICTURE FIRST (that'll need to be float:left in the stylesheet), then PRODUCT NAME, then ATTRIBUTES, then ADD TO CART, then PRICE, then DESCRIPTION. Just put them in that order. It may take some trial and error.

Then you'll have to make some changes in your stylesheet to style things the way you want them. (includes/templates/YOUR_TEMPLATE/css/stylesheet.css).

take it no one can really help me achieve something similar to this

I don't think anyone is going to do it all for you... start rearranging elements as Jade described, and we can give pointers from there. Ask specific questions as far as you can.

lucianman:

take it no one can really help me achieve something similar to this

Wow, did you just completely ignore my post? I gave you help on achieving what you want to do. As the previous posted suggested, give it a go, then come back here, and people will certainly help you tweak it to get it where you want it. But you can't expect it to be handed to you on a silver platter. Have you thought about HIRING someone, if you are so unwilling or unable to try it yourself?

gjh42:

HTML table....

:shocking: :shocking:

They're being depreciated ... there are other ways. i.e CSS Layers.

THat's how I'd do it, but people asking for basic help might know something about tables... they won't know or understand more advanced CSS.

But they're learning, so better to teach them the current standard than rather than supply outdated information ...

Didn't mean to rub ya the wrong way :hug:

testuser:

But they're learning, so better to teach them the current standard than rather than supply outdated information ...

Didn't mean to rub ya the wrong way :hug:

I love css as much as the next css lover :hug:, but getting things to be in the same format as table-type items can be VERY tricky, and not for the beginner css'r. Asking this dude to design floating div's that line up next to each other nicely depending on how many "columns" he may have, that don't mess up depending on the user's browser width, etc. etc. etc., is a tad beyond the scope of the original posters question, especially when we now see that he isn't willing to try anything on his own. It seems like you saw the word "table" and jumped to reply without really even taking in the whole picture. But, I guess I shouldn't be so critical, I remember doing the same thing when I was a born again css convert. :laugh:

Even zen cart uses tables for table type things, like the shopping cart page. Tables may be outdated, but its not like they are absolutely uncalled for in any circumstance. Tables, in my opinion, still serve a purpose in the right situation (like his sizing table that he may already have designed in his original site).

Now we've totally jumped off the original purpose of this thread, LMAO!

tried it, and it messed up and because it is a live shop, I have just put it back to the original page. Thanks anyway guys.

Hello guys,

The newest version of FCK editor has been adjusted for all 4 major browsers. It looks the same in all of them.

If you install the normal addition for the FCKeditor zencart download page, and then go to the FCKeditor website, you can download the free and update your entire editor.

Once this is done, it is a simple cut and paste without problem. It gets rid of many of these errors and also has a toggle with source code (without having to leave the same page.

Let me know if you have any questions - it only takes a few minutes and makes it so much easier to write your site.

:bigups: Good Looking Out!

jettrue: THANK YOU! I have been searching alot for this specific answer! I am a newbie and I'm trying really hard to get my shop in order.

Thanks a lot, it really helped me anyway!

Excellent post!! to my also helped enough, looked for me to make something similar. Thanks
Antonio