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 does not take into consideration the CSS styling from the Theme. The carousel on the store-front shows both user-created and template-based styling.

To find the Carousel Builder, go to Storefront Design › Design Options, then click the Carousel & Social Media tab

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 › My Themes, click the image of your current theme and select View demo from the Theme Options dropdown.

 

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

If the images look blurry, stretched or squished, it may not meet the image dimension requirements for the theme. See Finding Carousel Image Dimensions to learn more about the specifics of image dimensions for your particular theme. To learn how to fix images to fit the theme's image dimensions, see Fixing Distorted Images for detailed instructions. 

Related Articles

Additional Resources

  • Community Answers — ask specific questions about carousel design and find help for your specific needs from fellow merchants with expertise, partners, and BigCommerce Staff. 

Was this article helpful?