Re: Customize Product Page Layout

I'm trying to get a very clean and orderly look from our product page. Is it possible to get the product page to look more like the attached image (OpenCart)?

1. Have a main image that is about 250px X 250px with a 1px boder, then a number of 75px X 75px (all perfectly square with 1px border) thumbnail images neatly lined up that you can select to change the main image. When you select the current main image, it expands.

I'm figuring some of it out, but it is rough sorting through in-line markup vs css.

2. Tabs that are distinct, have a little bit of a 3D feel.

3. A review with comment area and "Write a Review" link close to the product price.

Here is a link to our only product so far:

www.proaudioshop.com/index.php?option=co...ckout=1&product_id=1

Thanks for your help!

Chris

Hi gmedia,

Everything you want can be done in HikaShop, But for many customizations like this, you have to ask a web agency, you can find some web agency on resources.joomla.org
Or simply post your request in commercial jobs section.

Is the attached image really how the products are supposed to be presented?

1. The price is all by itself.
2. There are no product details other than the description and price.
3. There is nothing uniform about the product images, other than they are close to each other and their bottoms are aligned.
4. The "Tabs" at the bottom are not tabs at all, but just text links that when clicked will scroll you down the page. The "3D Feel" I'm referring to is just that they have a little bit of depth to them like the image in the last post.

I was able to enlarge the main product image with a little CSS, but out of the box it doesn't seem to look very professional.

I know basic (probably more than basic) HTML and CSS, would I need more than that to make it display the way I'm talking about? I just need to know what files to tweak and be pointed in the right direction.

Thanks!

Chris

im having issues getting my product page looking good as well

Yes it's the basic products display, everything in hikashop can be customized, each thing as a class or a unique id.
You can edit all the views as you want.

The price can be moved in an other position, you can edit everything in css, or by editing the views, to edit the views you need some knowledge in PHP.
To edit the product page, you can edit the file "product / show_tabular" in HikaShop > Display > Views.

In the configuration of your module (HikaShop > Display > Modules) you can set the option "Display custom item fields" to yes. By this way the product details will be displayed.

For the images, the thumbnails have the same width, the height is set depending on the original file size. It can be changed, but a good PHP level is required.

When you edit the view "product / show_tabular", you can change the code to display tabs and not only text links. You can see examples in some showcase posted on the forum.
Here is a post talking about tabs in HikaShop: http://www.hikashop.com/ja/forum/4-how-to/52260-tabs-on-product-page.html

You can find some explanations in our FAQ:
http://www.hikashop.com/en/support/documentation/faq.html#css

Hope this will help you.

one of the main reasons i moved from redshop and virtuemart was that i wanted out of the box a clean, neat looking product page without me having to do all the css and php edits.

i bought the styles pack, and although the styles look old, i have managed to customise one so that it looks pretty good.

@Woonydanny

I completely agree with you. I'm a little dumbfounded by the product page. The developers seem pretty smart, but I'm a little taken back/confused at how unpolished the product page is. I'm coming from AceShop, which combines OpenCart and Joomla. The outward appearance of the shop was great, but the support was so generic 90% of the time and too many bugs needed tweaked. I think they are now doing a support overhaul though. Who knows.

Anyway, can you post a quick link of your shop. I know it's still under construction, but I'm on the fence right now and trying to decide how deep I want to go with Hika.

Here is the difference between the two product pages for me:


AceShop/OpenCart: www.proaudioplanet.com/index.php?option=...uct_id=86&Itemid=195

Hika: www.proaudioshop.com/index.php/component/hikashop/product/cid-1 (Including a few tweaks that are not out of the box. Larger main product image, Brand and Model number, etc.)

They are both under construction of course.

Chris

I agree as it does seem to be a bit of a nightmare to get things looking like i want them to. It was so easy with redSHOP to make everything look how you wanted to, but it was lacking in multi language support.