How to make full width product image on the Ride theme

Store Design
, ,
1

I am using the Ride theme and would like to make my product images full width on one page, but I cannot figure out how to do this. I don’t know how to target that image and I’m not seeing anything in the theme editor that will allow me to switch the product image to full width.

The mage is part of the Product Information section, but the image is not listed in the elements within that section.

I also do not see a way to simply add an image to the page template.

Can anyone assist? https://varinagoods.com/products/custom-banners

2

Hey @varinagoods,
Thanks for posting this Question to Shopify Community.
In order to make the Product image for the desktop full width you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css
In the end of base.css paste the following code.

.product.product--large.product--left.grid {
  gap: 60px !important;
}
.product__media-item.grid__item {
  width: 100% !important;
}
.product-media-container.constrain-height {
  height: 100% !important;
}
.product-media-container.constrain-height.media-fit-contain {
  --contained-width: 100% !important;
  width: 100% !important;
}
  .product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }
 .product--large:not(.product--no-media) .product__info-wrapper {
    padding: 0px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

Results:

results
results1916×840 60.7 KB

If this was helpful Mark as Solution and Like it so that other can find it.
Cheers :slight_smile:

3

You’re right, the Ride theme doesn’t include a built-in option to make the product image span full width. The product media area is contained inside the product information block.

You can solve this in two ways:

  • CSS approach – Add custom CSS so the product media container stretches 100% width. Example:
.product__media {
  max-width: 100% !important;
  width: 100% !important;
}
.product__media img {
  width: 100% !important;
  height: auto !important;
}
  • Template approach – If you’d prefer more of a banner-style image, you can edit your product template and insert an “Image Banner” section above the product details. That way, you control exactly which image is full width.

Both methods work, it just depends if you want every product image full-width, or just a featured/banner image at the top.

I’ve worked on similar Ride theme customizations before, so if you’d like, I can walk you through the step-by-step adjustments that fit your specific layout.

4

Hi @varinagoods

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.product__media {
  max-width: 100% !important;
  width: 100% !important;
}
.product__media img {
  width: 100% !important;
  height: auto !important;
}

Kindly feel free to get back to me if you need any further assistance.
If helpful, please like all posts. :white_check_mark:

5

HEy @varinagoods ,

Got it This is a common limitation in Shopify’s Ride theme - product images inside the Product Information section are wrapped in a grid, so they don’t naturally expand to full width. But we can fix it with a CSS override or by adjusting the template.

CSS Override (Quick Fix)

Add this snippet to your theme CSS:

/* Make product images full width on product page */
.template-product .product__media-wrapper {
   width: 100% !important;
   max-width: 100% !important;
}

.template-product .product__media img {
   width: 100% !important;
   height: auto !important;
   object-fit: contain;
}

Steps

  1. Go to Online Store → Themes → Edit Code.

  2. Open Assets → base.css (or theme.css / custom.css).

  3. Paste the CSS snippet at the bottom.

  4. Save → Refresh your product page.

Like this, sometimes Shopify themes don’t expose settings in the editor, but CSS targeting is the easiest fix. If you want a cleaner approach, we can also create a custom product template and make only that template full width.

If you’d like me to implement and test it directly on your store, feel free to reach out. You can also check my past work + contact here: https://rajatweb.dev/

Best Regards,

rajat / Shopify Expert