[NARRATIVE] Changing image size of recommended products on product page

Solved
Highlighted
Tourist
7 0 3

Hi all,

I'm just building a new website and have noticed that when I view the product page on mobile, the fourth image on the recommended products is smaller than the first three. Does anybody know how I could go about amending this? I don't mind what size they are as long as they are consistent.

Thank you.

1 Like
Highlighted
Shopify Partner
7457 1032 2592

Hello, @jacksonfin 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
7 0 3

Hi @KetanKumar 

My URL is fins-first-store.myshopify.com

Thank you in advance for your help

0 Likes
Shopify Partner
7457 1032 2592

@jacksonfin 

Thanks for URL.

i have check on mobile currently slider do you remove this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
29 2 7

This is a bit odd. The images are in a container 275x275 except for the last one which is 250x250.

Have you added any plugins or made code changes? I've added the Narrative theme to one of our dev stores and can't replicate the issue. Are you running an old version of the theme, perhaps?

Are the images square as you are uploading them? Or at least the exact same aspect ratio?

1 Like
Highlighted
Tourist
7 0 3

Hi @Steve30,

Thank you for having a look. I haven't added any plug-ins or made code changes to the product pages. The images are square, and it doesn't seem to matter which product is featured in the last frame, it's always smaller.

I only set this store up a couple of weeks ago and I've tried starting again using the narrative theme, but it doesn't seem to make a difference.

Thanks

0 Likes
Highlighted
Shopify Partner
29 2 7

I've tried replicating this again but with no luck. Chromes inspector does show that a smaller image wrapper is being loaded. Without access to the site, I can only guess that it's something more to do with the image that you have added to the product.

One thing I have noted is that the Elephant Tusk image on a desktop loads the 800x800 image yet the others are 900x900.

Can you try resizing the tusk to 900x900, removing the current image from the product and re-adding the new 900x900 image? Shopify auto-created various size images from the original you upload, so this might be the cause??

1 Like
Highlighted
Tourist
7 0 3

Thanks again for looking @Steve30 . I've resized the image but there doesn't seem to be any difference - no matter which product shows in that fourth place it's always smaller than the first three.

0 Likes
Highlighted
Tourist
7 0 3

Hi @KetanKumar

It's not a slider, it's the product recommendations on the product page - the fourth recommendation has a smaller image than the previous three:

 

productrecommendation_help.png

Thank you

1 Like
Highlighted
Shopify Partner
7457 1032 2592

@jacksonfin 

Thanks for update 

can you please try this code.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.product-recommendations__slide:nth-child(n+2):last-child {
    padding-right: 0;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like