Product Images Open Too Large on Shopify Starter Plan

Store Design
, , ,
1

Hi everyone,

I’m using the Shopify Starter Plan, and I’ve noticed that when I click on a product image, it opens way too large, both on mobile and desktop. Instead of fitting the screen, the image appears oversized, making it difficult for customers to view the product properly.

Since the Starter Plan doesn’t allow access to theme code, I can’t modify the CSS or JavaScript to fix this issue. I’ve tried uploading smaller images, but the problem persists.

Is there any way to make product images open in a more screen-friendly size without upgrading to a higher plan?

Has anyone else experienced this issue and found a solution?

Any help would be greatly appreciated!

Thanks in advance!

2

Hi @mustuner ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

Thank you for your response! My store is not password-protected. You can check it here: https://kurucabahcesi.com/

Let me know if you need any additional details. I appreciate your help!

4

Does anyone have any suggestions for solving the problem?

5

CodingFifty_0-1740424557419.png
CodingFifty_0-1740424557419.png366×706 133 KB

6

Thank you. But this feature is not in the Shopify Starter plan. It doesn’t appear on the product page. The Shopify Starter plan is a more limited Shopify package than the Basic plan.

7

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 50% !important;
        width: calc(52% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }
}

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
        padding: 0 0 0 4rem;
        max-width: 40% !important;
        width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }
}
8

I appreciate your support and effort. However, Shopify does not allow code editing under the Starter plan. I understand that it is a very basic package, but they should have allowed access to some essential features for critical modifications.