Using the Carousel Builder
What We'll Cover
The carousel is the set of rotating banners, or slideshow, that displays on the homepage of your store.
Carousels come in a variety of sizes, which are determined by the theme. They allow you to display up to five slides consisting of images and text, which can be linked to specific products or pages. They will rotate every few seconds.
In general, themes use dimensions of at least 1200 x 600 pixels. To learn more about carousel dimensions, see Finding Carousel Image Dimensions.The Carousel Builder is found in Storefront Design › Design Options
Adding Images to Slides
You can display up to five slides on your carousel. Unused slides won't appear on your storefront.
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 the link select from your computer and select an image to upload.
3. Save your changes.
For information on handling image distortion see Fixing Distorted Images.
Adding Text and Links
You have the option to text to each carousel slide. Slides consist of Heading, Buttons, and regular text that can be linked to another part of the store or to another website.
- Heading — The large headline text.
- Text — The regular-sized text which displays below the heading.
- Button Text — The text to appear in the slide button, generally a call to action. For example, Shop Now or Learn More.
- Link — The store page or webpage that the slide links to. See Making a link below.
- Preview — The 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?
- Slides — A list of your images and text that the carousel rotates through.
- Settings — Determine how long a slide displays before switching to the next slide. See Setting how often slides rotate below.
To edit any of these, 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 Stencil Theme Editor. On Blueprint themes, click the color button to the right of the text field to choose a different text color.
Why does the preview not match the storefront? The position and style of the text on the slides is determined by the CSS of the theme that you are using. The way the carousel looks in the preview will not match the way it displays on the storefront, so it is best to click View Store and refresh the screen when you save changes.
Making a link
Adding a URL to the Link field will take your customers to the specified page whether they click on the button text or anywhere else 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 which 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
To change how often the slides rotate, change the number in the Swap Every [number] Seconds field. The interval must be between 1 and 90,000 seconds.
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.
If you'd like to remove the carousel altogether, delete all the slides.
Deleting a slide will delete both the image and the text. Once deleted, it cannot be recovered, so be sure to have the image backed up on your computer.
1. Locate the small thumbnail of the slide you want to delete, and click the X in the top right corner of the thumbnail.
2. Save your changes.
- Why does the carousel preview look different than my storefront?
- Finding Carousel Image Dimensions
- Fixing Distorted Images