Product Image Size On Mobile

[UncleGym]

Hi there, I want to make sure the ‘add to cart’ and varient selector buttons are visible without scrolling on my product pages on mobile. To do this i need to make the product images smaller on mobile only but i cant go below ‘small’ on shopify

[Manoj_j]

Hi @UncleGym ,
Please share your store url and password if password protected.
Thanks
Manoj

[AiTrillion]

Hi @UncleGym ,

Can you please provide the store URL to generate the issue? Once, I generate the issue, I will check if it is a quick solution to CSS or not. If not, I have to check with store access.

[UncleGym]

Summit Nutrition Cream of Rice 80 Servings | Uncle Gym

[AiTrillion]

For mobile, you have to change the whole UI, you need to remove the announcement bar and move the header to the top. There is a lot of work which you got needed to be done.

[UncleGym]

why cant i just make the images smaller?

[Shopify-Partner]

@UncleGym Hey yeah, Shopify’s image size settings can be limiting, especially on mobile. One workaround is adding a bit of custom CSS to shrink just the mobile size beyond the “small” option, You can target it with media query like @media (max-width:768px) and manually set a smaller max-height for the product page

[UncleGym]

this is what im hoping to do, would you be able to provide code and i can just adjust the pixel numbers?

[Shopify-Partner]

Sure thing here’s a snippet you can adjust

@media (max-width: 768px) {
.product__media, .product__media img {
max-height: 300px;
object-fit: contain;
}
}

[oscprofessional]

Hi @UncleGym ,

If you can’t shrink the product images enough in Shopify’s settings, the easiest solution is to add a sticky Add to Cart bar on mobile so customers always see the variant selector + button without scrolling.

1. In your product template (main-product.liquid), duplicate the variant selector and Add to Cart form, and place it inside a new wrapper below the product section:

<div class="mobile-sticky-atc">
  {% form 'product', product %}
    {% if product.has_only_default_variant == false %}
      {{ product.options_with_values | json }}
      {% render 'product-variant-selector', product: product %}
    {% endif %}
    <button type="submit" class="atc-button">Add to Cart</button>
  {% endform %}
</div>

2. In your CSS (base.css or theme.css), make it stick to the bottom of the screen on mobile only:

.mobile-sticky-atc {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-atc {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-sticky-atc select,
  .mobile-sticky-atc .atc-button {
    flex: 1;
    height: 45px;
  }

  .mobile-sticky-atc .atc-button {
    background: #000;
    color: #fff;
    border: none;
    font-size: 16px;
  }
}

[AiTrillion]

Even if you reduce the image size, it still doesn’t work because the Add to Cart button is positioned too far away. You’ll definitely need to change the image.

[UncleGym]

thank you, great thinking. i diddnt use this code i just went for an app. Summit Nutrition Cream of Rice 80 Servings | Uncle Gym does this app look better than the code or should i try the code? Also i wonder if you can help, now i have done the sticky cart the shopify inbox and ‘rewards’ button get in the way. i want them to maybe only show on the home page? i have attached an image of the buttoms um talking about as i have temporarily removed them

[oscprofessional]

Hi @UncleGym,

Got it - you’ve switched to using an app instead of custom code for the Summit Nutrition Cream of Rice 80 Servings | Uncle Gym feature, and now the sticky cart is colliding with the Shopify Inbox & “Rewards” buttons.
If you just want them to only show on the homepage, we can do that with a simple Liquid condition + CSS so you don’t have to completely remove them.

Hide Shopify Inbox & Rewards Everywhere Except Homepage

{% if template != 'index' %}
<style>
  /* Shopify Inbox Button */
  .shopify-chat-button { display: none !important; }

  /* Rewards Button — adjust selector based on actual class/id */
  .rewards-button { display: none !important; }
</style>
{% endif %}

If you send me the HTML/class names of those buttons, I can give you the exact CSS selectors so they disappear everywhere except the homepage without touching the app code. That way, they won’t overlap your sticky cart.

If performance and site speed are priorities (especially for Core Web Vitals), custom code is almost always lighter than an app. But if you want speed of implementation and easy management, the app is fine.