Browse by Topic

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 theme-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 content
  • Text color

The theme 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 style will look like in general, go to Storefront Design › My Themes, click the image of your current theme and select View demo from the Theme Options dropdown. This will usually show what the default font and button styles are used on the theme's carousel. There is not a method for previewing the Carousel prior to publishing it. 

 

Can I change the font type and position? For our legacy Blueprint Themes these can usually be adjusted. See Customizing the Built-In Carousel's Fonts (Blueprint) for instructions on how to change the font. For Stencil Themes, you will have to customize the theme using the Stencil CLI.

Image Distortion

Distorted Images
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. 

Was this article helpful?