Adjust Product Image Limits

Store Design
, , , , ,

Topic summary

A user wanted to adjust product image width on desktop from 60% to 50% of screen width to achieve symmetrical layout on their Shopify Stiletto theme store.

Solution provided:

  • Navigate to Admin → Online store → Theme → Edit code
  • Locate theme.css file
  • Add custom CSS targeting .product__primary and related classes
  • Key changes include adjusting grid-gap, padding, and grid-template-columns properties with media queries for screens min-width 960px

Outcome:
The CSS customization successfully resolved the issue, achieving the desired 50% image width layout.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
2

Hi @martujv ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.css.

Step 3. Add this code to the end of file

.product.animation.animation--product {
  padding-right: 0px!important;
}
@media (min-width: 960px){
    .product__primary{
       grid-gap: 0px!important;
    }
    .product[data-gallery-size="medium"] .product__primary{
      grid-template-columns:50fr 50fr!important;
    }
    .product__details.product__primary-right {
       padding: 0 3vw!important;
     }
}

Result

BSSCommerceB2B_0-1723819722984.png
BSSCommerceB2B_0-1723819722984.png1917×935 71.1 KB

If it helps you, please like and mark it as the solution.

Best Regards

1 Like