Home Page Carrousel

A carousel is a set of rotating banners or a slideshow that displays on your store's homepage. It allows you to display up to five slides of images and text, which can be linked to specific products or pages. The image will change every few seconds.

Carousels come in various sizes, which are determined by the theme. In general, themes use dimensions of at least 1200 x 600 pixels. Carousel images must be in JPEG/JPG, PNG, or GIF format.

Carousel Builder

The Carousel Builder is found in Ecommerce Settings > Channel Manager › Elipses to the right of the Channel Domain > Edit Settings > Home Page Carousel.

ADDING IMAGES TO SLIDES

You can display up to five slides on your Carousel. Empty slides won't appear on your Storefront.

Pro Tip! When using the Carousel Builder for the first time, it will have sample images preloaded. Make sure to delete the sample slides before adding new images.

1. Click on an empty slide thumbnail. The preview will change to a message telling you to add the image.

2. On your computer, open the folder that contains your image, then drag and drop the image from your computer to the Carousel preview box. Alternatively, click select from your computer and select an image to upload.

Save your changes.

ADDING TEXT AND LINKS

You have the option to add text to each carousel slide. Slides contain a heading, button text, and regular text that can be linked to another part of the store or website.

1. Heading — The large headline text
2. Text — The regular-sized text which displays below the heading
3. Button Text — The text to appear in the slide button, generally a call to action like Shop Now or Learn More.
4. Link — The store page or webpage that the slide links to. See Linking a slide to another page below.
5. Preview—A preview of what the text says; it will not look like this on the Storefront. See, Why does the carousel preview look different than my Storefront?
6. Slides— A list of your images and text that the Carousel rotates through
7. Settings— Determine how long a slide displays before switching to the next slide. See Setting how often slides rotate below.

To edit the text on the slide, click on the thumbnail of the slide you want to edit. From here, you can type your message into the field next to the type of text you want to display.

To change the text color, go to the Page Builder.

Does your Carousel Builder look different? Legacy Blueprint themes have different settings for editing carousel text color. See Blueprint Themes for more information.

LINKING A SLIDE TO ANOTHER PAGE

Adding a URL to the Link field will take your customers to the specified page when they click anywhere on the slide.

To link to a page in the store, such as a specific product or category, click Browse.

Select the tab for the type of page you are linking to (Product, Category, Brand, Web Page, or Blog), then select the page from the list that displays below the tab and click Insert Link. To send shoppers to a different website, such as an offsite blog, enter the URL of that website directly in the field that says Enter destination link.

SETTING HOW OFTEN SLIDES ROTATE

Change the number in the Swap Every [number] Seconds field to change how often the slides rotate. The interval must be between 1 and 90,000 seconds (25 hours).

REORDERING SLIDES

Click and drag a slide to move it into your preferred order. All of the text and links will be moved along with it.

Save your changes before you leave the page.

DELETING SLIDES

Deleting a slide will delete both the image and the text.

Be careful! Once deleted, the image cannot be recovered, so keep backups of the images you used.

To remove a slide, locate the small thumbnail of the slide you want to delete and click the X in the top right corner of the thumbnail.

Image Distortion

If the images look blurry, stretched, or squished, they may not meet the image dimension requirements for the theme. The recommended image dimensions can be found in the theme's manual or listed in the image preview when an empty slide is chosen. For more advice, see our guide to Editing Your Store Images.

Finding Carousel Dimensions

Each theme includes a carousel, or slideshow, to display products prominently and calls to action. Since our themes come in various styles, they will have different requirements for carousel image dimensions.

Image Dimensions — the width and height of an image, using a measurement of pixels (px)

The image recommendation can be found in its documentation. Use the guide below to help find these specifications.

Need to fix a Carousel Image? See our guide on Adjusting Your Store Image Settings for help getting the image the right size for the Carousel.

Image Dimensions

Stencil themes typically use carousel dimensions between 1200 x 600 pixels and 1600 x 900 pixels. Check your theme's documentation before creating and adding carousel slides, as different themes have different recommended dimensions.

Images outside the recommended dimensions can risk becoming distorted since the theme will stretch or squish an image to make it fit. See Editing Your Store Images for help resize images to fit the Carousel. The Carousel will adjust to suit the customer's screen size, as all Stencil themes are responsive.

If you purchased a theme, contact your developer and review the theme documentation.

If you are using a Cornerstone theme, see the Cornerstone Theme Manual. Page Builder can adjust Carousel image sizes on larger screens, forcing the image to stretch.

Don't see any recommended height dimensions? If the manual has no suggestions for the image height, we recommend using 600 or 800 pixels. Make sure all the images use a consistent height.

FAQ

Why does the preview look different than the 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 consider the CSS styling from the theme. The Carousel on the Storefront shows both user-created and theme-based styling.

What aspects of the Carousel does the theme have control over?

The theme manages 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

Why does the carousel image look stretched or squished?

If the image doesn't match the required image dimensions of your theme, the image will be stretched or squished to fit. If you are experiencing this, see Troubleshooting Your Store Images and review your theme's documentation.

How do I fix the Carousel if it cuts off part of my image?

Some Stencil themes have a Page Builder setting determining how to handle larger images.

Can I change the fonts used on the Carousel?

You must customize the theme using the Stencil CLI to change carousel fonts. This can be done in legacy Blueprint themes by customizing the template files.

How do I remove the Carousel?

The easiest way to remove the Carousel is to delete all the slides so it only has empty slide thumbnails.

Can I change the dimensions of the Carousel?

It is possible to adjust the default dimensions of a carousel by editing a theme's code. 

Can I use animated images or video in the Carousel?

Carousels can use animated GIF images if there needs to be extra movement, but video files are not supported.

Do I have to have multiple slides?

You can have 0 to 5 slides. If you have only one slide, it will not rotate but will remain a static image.