Gallery Image Not Positioned Correctly


The product image gallery is not positioned in the page layout correctly. Typically the product preview image of the product gallery is pushed down below where it appears it should be, leaving a large amount of empty space.

Known Causes

This issue is caused when other styles being applied to your site images cause the image to take up more width than Shopp is allocating for it. This usually occurs when your images have CSS styles applied that add a border, extra padding or a margin around the image.


You can account for this by Setting Up Theme Templates and adding an overriding style to your theme’s shopp.css.

#shopp .gallery .previews li { width: ###px; }

Replace ### with the width specified for your gallery images under ”’Shopp → Settings → Presentation”’ plus the extra spacing defined for the image border, padding or margins applied to your images: image width + margins + padding + borders

For example, if your image has a 4px border applied, you would include the following in your shopp.css:

#shopp .gallery .previews li { width: 248px; }

This issue occurs because Shopp cannot determine any styles applied to your images from other sources such as your theme’s styles.css file or from other plugins that may alter your image presentation.

See Also

Gallery Image Not Positioned Correctly
  • 0.00 / 5 5

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.