![[BigCommerce] Make product image always centered on product details page](https://cdn11.bigcommerce.com/s-c14n6tful3/images/stencil/830x518/uploaded_images/bigcommerce-make-product-image-centered.jpg?t=1516339262 "[BigCommerce] Make product image always centered on product details page")
[BigCommerce] Make product image always centered on product details page
Add the code below in your Storefront > Footer Script:
<style>
@media (min-width: 801px) {
.productView-imageCarousel-main-item > a {
position: relative;
display: block;
height: 0;
padding-top: 100%;
}
.productView-imageCarousel-main-item > a img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>This code works for these themes:
- Supermarket
- Sarahmarket
- Paralbag
- LaParis
- CARIL
Contact us if you need help or mod for other themes.
19th Jan 2018
Theme design & customization blog
-
PC Builder for BigCommerce – Build & Buy Custom Computers Online
At PapaThemes, we’re proud to introduce a game-changing feature in the Eyeva Theme for BigComm …15th Aug 2025 -
The Ultimate Guide to Showcasing Products by Category for All BigCommerce Themes
In today's digital marketplace, the way you display your products can make a significant differen …23rd May 2023 -
Auto update quantity of products bought together according to the main product qty in Supermarket theme
Insert the code below to Storefront > Script Manager:<script>(function($) { $('body').on …9th Sep 2019