Why does the carousel preview look different than my storefront?

The appearance of the Carousel preview, found by going to Storefront DesignDesign Options, then clicking the Carousel & Social Media tab, can differ substantially from the carousel as it appears on your storefront. This is because the preview in the control panel is based on a generic template that only shows user-created customizations. The carousel on the store-front shows both user-created and template-based customizations.

Image Size, Fonts and Text Positioning

The user has control over the following aspects of the carousel. These aspects will also display on the carousel preview in the control panel.

  • Images
  • Image order
  • Text
  • Text color

The template controls over the following aspects. These will only show on the storefront, not on the preview in the control panel. These are primarily controlled from styles-slide-show.css, although this varies depending on the template.

  • Image size
  • Text font
  • Position of text

Control panel carousel preview vs. how it looks on the storefront

To get an idea of what your selected theme's carousel will look like, go to Design, hover your mouse over the image of your current theme, and click View demo.

Image Distortion

The recommended carousel image size varies from theme to theme. To find your theme's recommended carousel image size go to Storfront Design, then click the Carousel & Social Media tab and view an empty slide. The recommended image size will be displayed below the select from your computer link in the large carousel preview area.

Carousel slide recommended image size

If the image you upload does not match these dimensions, it will automatically be resized on your storefront by your theme's CSS which results in the image appearing distorted. To resolve this issue, crop or resize your images using image editing software before uploading them to the carousel builder.

Cropping vs. Resizing Images

There are two methods which can be used in order to get your custom images to your theme's recommended size; cropping and resizing.

Cropping is the process of "cutting" the excess areas of an image to produce a smaller image. In the example below, the original image (left) is 1000 pixels wide by 1500 pixels tall, while the cropped version (right) measures 980 pixels wide by 450 pixels tall.

Cropped image example.

Resizing is the process of stretching or shrinking an image's width and height to force it to specific dimensions. In most instances this will result in the image appearing distorted. In the example below, the original image (left) is 1000 pixels wide by 1500 pixels tall, while the resized version (right) has been forced to 980 pixels wide by 450 pixels tall resulting in image distortion.

Resized image example.

You are able to resize or crop your images using basic image editing software already install on your computer. Alternatively, you can use an online service like Pixlr to make edits.


Was this article helpful?