[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

Did you know?

Free Trial for all our BigCommerce themes.

Request Now

Need help? Don't hesitate to ask us. We'll reply shortly.

All our BigCommerce themes are 100% compatible with the Standard, Pro, Enterpise edition. Built with Stencil / Cornerstone framework.

All our Shopify themes are built with Shopify Sections - customize themes without touching to any line of code.