Why does the carousel preview look different than my storefront?
What We'll Cover
The appearance of the Carousel preview, found by going to Storefront Design › Design 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.
- Image order
- 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
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.
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 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.
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.
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.