Product Page Images are too Big in Horizon Theme

Product Page Images are to Big in Horizon Theme

Go to Customize > Theme settings > Custom CSS and add code:

@media screen and (width >= 750px) {
    .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left {
        grid-template-columns: 1fr 1fr;
    }
}

Transcript:

Hello and welcome back to KM Webverse. This is Kashif Mahmood. In this video, I will tell you how you can fix the product page images in the Horizon Theme. Here you can see people were having issues with the product images, so I thought I should create a video to tell you guys how you can fix that.

So here is the product page that is currently showing on my end, and you can see that the images are pretty big and this side is small, so the images look weirder. Here you can see I have a carousel, so you may see, uh, different thing. If you want to make it like this carousel, then you can watch my video on that. I already created the video on that — Show Product Carousel on Product Page — so you can add the sliding images if you want by following this video.

In this video, I will tell you how you can fix the product page image sizing. So to fix this, just go to your Shopify dashboard, and here under Themes, just click on Customize to customize your theme.

Now, there are several ways to fix the product page images. I will tell you all of the methods, so you can follow whichever suits you best. So here, just select the Default Product Page Template. So here, when you will click on this thing, you will see some options.

The first thing is this Extend Media to Screen Edge, so you can turn it off so that there will be some gap on the screen edges. So that’s the first thing to do. And here you will see Spec Ratio – Adapt to Image, which is by default. You can change it to Square because when you will select a square over here and you go to your website, you can see that all of them are like square. So it looks equal, and it looks good. So just go and select square over here.

So when you upload any new image on the products, just make sure they are square. You can set up the square template with Canva or something. So just make sure you upload square images — that way, it will look best.

And then there is this Padding option. If you want more gaps on the side, then you can just increase it to like 100, or maybe 80 or something. So that way you can see it’s more centered as well, so this is looking good.

And now there is another solution as well — that is using CSS. So here is the code that will fix this issue even better. So just go to the customization, and here you need to go to Settings over here. But before that, just let’s click on Save and see how it is looking now.

So this was the before version. So we can refresh it. Now you can see there are some gaps on the sides, which makes it better. And to fix it even more so that both of these things are equal — for that thing, go to Theme Settings, and here go to Custom CSS, and here you need to paste the CSS that you have copied. I will provide the link for this code in the description, so you can copy it. And once you have added that, you can click on Save.

And now go back and click on Refresh. So here you can see — but now it looks like it’s a lot smaller. So that’s because we have added the padding thing. So if you add this CSS code, then you can just remove the padding from here. Just make it like 10 or 20 or something. So that will make it even better. So let me make it 20, and then I can show you. So let’s click on Save.

Go to the page and click on Refresh. So here you can see now it’s more better. So that’s how you can fix the product page images. And if you want, you can also change the spec ratio if you want — it’s all on your choice.

So if you still have any issues with the product page images, do let me know in the comment section, or you can also contact me through my website. Here you can see the Contact page. So just go and fill the form, and I will get back to you with the best possible solution.

So that’s it for this video. You can also check out this playlist if you want more customizations in the Horizon Theme. So that’s it for this video. Like this video. Subscribe to my channel for more related videos. See you next time.

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Best Themes

Best Web Hosting

Scroll to Top
A change to get free website

Submit your application...

Live Support

Place Your Order...

$25/Month Website Maintenance Package

Place Your Order...

Website Audit

Place Your Order...