[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:

  1. Supermarket
  2. Sarahmarket
  3. Paralbag
  4. LaParis
  5. CARIL

Contact us if you need help or mod for other themes.

Upgrade BigCommerce theme to support google AMP now

Buy Me A Coffee

19th Jan 2018 Papathemes

Theme design & customization blog

Show More