Customize product page layougt

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350053

-- url of the page with the problem -- : www.javelincommunications.com/build-you-dream-stanchion
-- HikaShop version -- : 4.7.1
-- Joomla version -- : 3.10.11

As I look at the layout of my product page, it breaks down into a row with two oolumns
On the left we have.<div id="hikashop_product_left_part" class="hikashop_product_left_part hkc-md-6">
On the right we have: <div id="hikashop_product_right_part" class="hikashop_product_right_part hkc-md-6">
Then across the bottom we have: <div id="hikashop_product_description_main" class="hikashop_product_description_main">
I think I see the ratonale in that this layout will scale easily for mobile. But in desktop view it makes poor use of available screen space and requires excessive scrolling by user.
The only element present in lelft part is the product thumbnail image.
Since I have many options to my product, that pushes the div down and opens up a gaping hole of unused white space.
Now, I understand that this is an unusual case due to the large number of options.
As one adds options, it creates all that white space to the lefthand side of page.
It looks to the viewer like a mistake.
For example, could I put "description_main" into "product_left_part"? Or would that create a layout rendering issue? I will play around this if I can ever figure out the trick and creating and managing custom product layouts in PHP views..
I'd also like to remove product thumbnail, sincen it serves no purpose in the somewhat unconventional store we are creating.
-Jim Gribble

Last edit: 1 year 1 month ago by jgribble.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350057

I can make it look a little better by increasing the image max width in the configuration settings, but still would be interested in placing the product details side-by-side with product_main.
Thanks again,
-Jim G.

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
1 year 1 month ago #350062

Hi,

I would recommend not using the "tabular" layout but the "default" layout. Then, edit the product / show_default view file via the menu Display>Views and move the description area from the bottom to the left area with the drag'n'drop editor and save and it will do what you want.

Please Log in or Create an account to join the conversation.

  • Posts: 317
  • Thank you received: 20
  • Hikashop Business
1 year 1 month ago #350075

Thanks for your reply! Exactly which file do I edit? Can I clone that file, customize it and apply it selectively to products? I think so, but how. Is there as tutorial?
Best regards,
-Jim Gribble

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
1 year 1 month ago #350078

Edit the product / show_default view file via the menu Display>Views.
Change the "default" name in the input field when you edit the view file, and it will be saved as a clone which you can select in the "page layout" setting of each product selectively.

Here is a documentation page with more information on this:
www.hikashop.com/support/documentation/1...-display.html#layout

Please Log in or Create an account to join the conversation.

Time to create page: 0.061 seconds
Powered by Kunena Forum