[Skip to main content](#vessel-content) # Re: Customize Product Page Layout ## - **[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")** - [![gmedia's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8720-gmedia "View gmedia's Profile") Topic Author - [ Offline](/forum/user/8720-gmedia) Less More - Posts: 14 - Thank you received: 2 - - 14 years 2 months ago - 14 years 2 months ago [\#61448](#61448) by [gmedia](/forum/user/8720-gmedia "View gmedia's Profile") *[Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61448 "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")* was created by *[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")* 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](http://www.proaudioshop.com/index.php?option=com_hikashop&ctrl=product&task=updatecart&quantity=1&checkout=1&product_id=1) Thanks for your help! Chris - [ ![hika-01.jpg](/forum/attachment/5298) ](/forum/attachment/5298 "hika-01.jpg") [ ](/forum/attachment/5298?download=1 "hika-01.jpg") - [ ![hika-02.jpg](/forum/attachment/5299) ](/forum/attachment/5299 "hika-02.jpg") [ ](/forum/attachment/5299?download=1 "hika-02.jpg") Last edit: 14 years 2 months ago by [gmedia](/forum/user/8720-gmedia "View gmedia's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 14 years 2 months ago [\#61511](#61511) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61511 "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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")** - [![gmedia's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8720-gmedia "View gmedia's Profile") Topic Author - [ Offline](/forum/user/8720-gmedia) Less More - Posts: 14 - Thank you received: 2 - - 14 years 2 months ago [\#61515](#61515) by [gmedia](/forum/user/8720-gmedia "View gmedia's Profile") Replied by *[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61515 "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")* 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 - [ ![hika-07.jpg](/forum/attachment/5313) ](/forum/attachment/5313 "hika-07.jpg") [ ](/forum/attachment/5313?download=1 "hika-07.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")** - [![woonydanny's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar5795.jpg)](/forum/user/5795-woonydanny "View woonydanny's Profile") - [ Offline](/forum/user/5795-woonydanny) Less More - Posts: 218 - Thank you received: 6 - - 14 years 2 months ago [\#61517](#61517) by [woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile") Replied by *[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61517 "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")* im having issues getting my product page looking good as well ![:(](/media/kunena/emoticons/5.png ":(") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 14 years 2 months ago - 14 years 2 months ago [\#61534](#61534) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61534 "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")* 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)[ www.hikashop.com/ja/forum/4-how-to/52260...on-product-page.html](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)[ www.hikashop.com/en/support/documentation/faq.html#css](http://www.hikashop.com/en/support/documentation/faq.html#css) Hope this will help you. Last edit: 14 years 2 months ago by [Xavier](/forum/user/4105-xavier "View Xavier's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")** - [![woonydanny's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar5795.jpg)](/forum/user/5795-woonydanny "View woonydanny's Profile") - [ Offline](/forum/user/5795-woonydanny) Less More - Posts: 218 - Thank you received: 6 - - 14 years 1 month ago [\#61665](#61665) by [woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile") Replied by *[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61665 "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")* 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. ![:(](/media/kunena/emoticons/5.png ":(") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")** - [![woonydanny's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar5795.jpg)](/forum/user/5795-woonydanny "View woonydanny's Profile") - [ Offline](/forum/user/5795-woonydanny) Less More - Posts: 218 - Thank you received: 6 - - 14 years 1 month ago [\#61682](#61682) by [woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile") Replied by *[woonydanny](/forum/user/5795-woonydanny "View woonydanny's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61682 "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")* i bought the styles pack, and although the styles look old, i have managed to customise one so that it looks pretty good. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")** - [![gmedia's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8720-gmedia "View gmedia's Profile") Topic Author - [ Offline](/forum/user/8720-gmedia) Less More - Posts: 14 - Thank you received: 2 - - 14 years 1 month ago - 14 years 1 month ago [\#61697](#61697) by [gmedia](/forum/user/8720-gmedia "View gmedia's Profile") Replied by *[gmedia](/forum/user/8720-gmedia "View gmedia's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#61697 "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")* @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](http://www.proaudioplanet.com/index.php?option=com_aceshop&route=product/product&path=38_43&product_id=86&Itemid=195) Hika: [ www.proaudioshop.com/index.php/component/hikashop/product/cid-1](http://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 Last edit: 14 years 1 month ago by [gmedia](/forum/user/8720-gmedia "View gmedia's Profile"). The following user(s) said Thank You: [tesla](/forum/user/40372-tesla "View tesla's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[WillPatterson](/forum/user/4703-willpatterson "View WillPatterson's Profile")** - [![WillPatterson's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/4703-willpatterson "View WillPatterson's Profile") - [ Offline](/forum/user/4703-willpatterson) Less More - Posts: 16 - Thank you received: 0 - - 13 years 11 months ago [\#71652](#71652) by [WillPatterson](/forum/user/4703-willpatterson "View WillPatterson's Profile") Replied by *[WillPatterson](/forum/user/4703-willpatterson "View WillPatterson's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#71652 "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")* 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86283 - Thank you received: 14262 - - 2 years 1 month ago [\#362860](#362860) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Customize Product Page Layout](/forum/4-how-to/61448-re-customize-product-page-layout#362860 "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, For anyone stumbling on this page, note that this discussion was 12 years ago. Since then, we've added many improvements, including a view builder to be able to easily rearrange the elements on the product page without having to change any code: [ www.hikashop.com/home/blog/471-hikashop-4-4-3.html#drag](https://www.hikashop.com/home/blog/471-hikashop-4-4-3.html#drag) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzYxNDQ4LXJlLWN1c3RvbWl6ZS1wcm9kdWN0LXBhZ2UtbGF5b3V0P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.356 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)