Image Display

Hello,

I looked at your page. The image is there and it loads correctly, it is just displayed with a width of zero pixels, which is why you see an empty light blue box.

The cause is the custom CSS of your website. It contains these rules, which were written for the classic product page layout, where the small thumbnails are placed in a row under the main image :

div.hikashop_main_image_div, div.hikashop_main_file_div { width:100%; background:#f3f8fe; padding:60px }
.hikashop_product_page div.hikashop_small_image_div { display:flex; gap:15px; width:100%; justify-content:space-evenly }

.hikashop_product_page .hikashop_modern_images .hikashop_global_image_div { flex-direction: column; }

Hi Rolf,

Thanks for your report on this. While this is not a bug per se, it's something we can improve on our end so that customization of price language overrides don't break the layout.
Download the install package of HikaShop on our website and install it on yours.
That will add a patch with some changes to the CSS in order to improve the display there.

Hi,

Yes. For the placement of the elements on the product page, you want to activate the Display view files setting of the HikaShop configuration. Then, access your product page on the frontend, and click on the edit button on the main layout area. That will open a popup, and you'll get a drag & drop view builder to move each element of the layout.
For the font weight, you can add CSS on your website. Usually, templates should allow you to add custom CSS. So you can look with the inspector tool of your browser for the CSS class of the element you wish to change. You can also ask AI for this. If you get it the link of your product page and tell it what you want to change, it should be able to tell you what CSS to add.

Hi,

For the text below the image on the categories listing, edit your listing settings (either via the Joomla menu manager if it's a category listing menu item or via the Joomla modules manager if it's a HikaShop content module). There, under the categories options (for menu item) / Hikashop options (for module) tab, change the item layout to "image" instead of "image and title".

Did you activate the "Display view files" settings ?
www.hikashop.com/support/documentation/5...g.html#advanced_main
Once done, go to the product page on the frontend. You should see borders around each view file of HikaShop when you hover on the different elements of the page related to HikaShop. It will tell you which view file is used ( so it can be found easily in Display / Views in the HikaShop backend ), and it should have an edit icon there too so that you can directly edit the view file with a popup.

Hi Rolf,

Here are the two changes, step by step.

To move the product name above the image (no code needed):
Since you already see the borders appear on the page when you hover over it, you are almost there.
1. Open one of your product pages on the frontend, while logged in as administrator.
2. Move your mouse over the area that holds the product name and the image. A small edit icon (a pencil) appears on that block.
3. Click that pencil. A popup opens with the list of the elements of the page (name, image, price, add to cart, and so on), stacked one under the other.
4. Grab the line for the product name and drag it up, above the line for the image. Release it there.
5. Click Save.
The name is now above the image on all your product pages. No code is involved if you use the drag & drop builder interface of the popup.

To make the product name bold:
This one needs a single line of CSS. Add this to the custom CSS of your site:

.hikashop_product_name_main { font-weight: bold; }

Hi,

Thanks for the screenshots.
You're getting confused because it's hard to read which view file is for which area on your listing because you have a lot of columns compared to the width available.
It's the product / listing_img_title.php view file you want to edit in your case. when you do, you should see the drag & drop interface.

Hi Rolf,

Nothing is lost, your changes are simply still in place. When you use the drag & drop editor, HikaShop saves a customized copy of the view file on your website. Moving the elements back inside the popup does not remove that copy, it just saves a new version of it. Looking at your pages, both are still running customized files :

- on the product page, the image block is now in the right column instead of the left one, which is why the page looks stretched and the lines are not in the order they used to be
- on the category listing, the product name is now displayed under the price and under your delivery text instead of above them

To get back to the original layout, go in the HikaShop backend, menu Display > Views. The customized files are the ones which have a red "Remove customization" button on their line (the "See modifications" button next to it shows you what was changed, so you can check before removing). In your case they are :

- product / show_default.php (your product page)
- product / listing_img_title.php (your products listing)

Click "Remove customization" on each of the two and confirm. Both pages will go back to the layout they had before. Note that this deletes the whole customized file, so if you had made other changes in it, they will be gone too.

That also explains why only that one category is affected : your other listings use the "Image" item layout, which is a different view file, so the customized listing_img_title.php only shows on the category which is still set to "Image and title".

About the bold product name, the CSS class is not the same on the two pages. On the product page it is hikashop_product_name_main, while on the listings it is hikashop_product_name. So this line covers both :

.hikashop_product_name a, .hikashop_product_name_main { font-weight: bold; }