- This topic has 12 replies, 2 voices, and was last updated 4 years, 5 months ago by
.
Hi. The aspect ratio of my product images is 3:4. I’d like to display the entire image in this ratio in my product catalogue/ shop page/ front page. Images are now cropped 1:1. See screenshot (1)
Images are displayed without cropping (correct) in the individual product page. However, the “Sale” badge is not fully displayed here, and is cut off. See screenshot (2). How can I display the badge like in the product catalogue?
Hi @Sensado,
I hope you are well today and thank you for your question.
Could you please share the page URLs from your site where it is displaying so that I can help you to achieve it?
Best regards,
Shufflehound teamsure
individual product page
https://www.sensado.com.au/product/himalayan-breeze/
products displayed on home page
Your shared pages are not accessible for me and just displays the message “SITE UPDATE IN PROGRESS”.
Would you mind if I log in to your site and access it? If this is ok then could you please temporary share me your site admin login details privately by adding them in the box having text “Enter your private content here (only you and forum moderators will be able see it)”?
Also, please tell me exactly how you want to display the images on your shared pages.
sure, thanks for your reply.
yes, my site is currently in coming soon mode. please use the log in details below.
Image display:
- Aspect ratio 3:4 (as in uncropped original picture)
- Badge (“Sale”) to be displayed in full on individual products as in product catalogue pictures.
Also, I noticed that the second picture of an individual product is pixelated/ blurry although the image size is sufficient. See screenshots attached
Please update the theme on your site to the below latest version as described here https://support.shufflehound.com/updating-theme/
Also, please try regenerating thumbnails on your site using the below plugin.
Hi there.
Did all of the above.
No improvement. see screenshot. 2nd product image still blurry. badge cut off. no 3:4 ratio in product catalogue.
update: could solve the 2nd image to be shown correctly by setting main image width in frontend customiser.
other issues still persistent
I regenerated the thumbnails and used below custom CSS code to make it work.
.gillion-woocommerce div.product-tag-container { top: 10px; }Could you please check it now?
thank you.
individual product page:
- badge is displayed fully now
- however, the badge doesn’t look like the one displayed on products in the catalogue, i.e. off-set/slightly above product image with shadow
- can you please adjust if possible
product images in product catalogue:
- aspect ration still not 3:4 (full image display, like on individual product page)
- please adjust if possible
Thank you so much
Solution for this topic
badge is displayed fully now
however, the badge doesn’t look like the one displayed on products in the catalogue, i.e. off-set/slightly above product image with shadow
I did it on your site using below CSS code.
.single-product .content-container.sh-page-layout-full { padding-top: 25px; }can you please adjust if possible
product images in product catalogue:
aspect ration still not 3:4 (full image display, like on individual product page)
To achieve this, you have to develop custom code in the child theme of Gillion theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/gillion-multiconcept-blogmagazine-theme/19470306/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
thank you. the badge is displayed correctly now. cheers.
You are most welcome here 🙂
