Why does the carousel preview look different than my storefront?

The appearance of the Carousel preview in the Control Panel 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. To find the Carousel preview, go to Storefront Design › Design Options, then click the Carousel & Social Media tab

Image Size, Fonts and Text Positioning

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

  • 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.

  • 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 Storefront Design, hover your mouse over the image of your current theme, and click View demo.

 

Can I change the font type and position? For our legacy Blueprint themes these can usually be adjusted in styles-slide-show.css, although this varies depending on the template. For Stencil themes, you will have to customize the theme using the Stencil CLI.

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 if you are using one of our legacy Blueprint themes. To find the recommended slide size for a Stencil theme, check its Theme Manual

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 code 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.

Resources

Was this article helpful?