Ask a Question ?
Design & Publish Websites Faster

Set Up a Carousel App

Set Up a Carousel App

In this article you will learn about the Carousel app and how to set it up. This app is used to showcase a series of items with a paginated index to browse between them. They also have a title and footnote each of them. It can be used to display a catalog of products, for example.

The carousel app

It can be used to show a catalog of products

First step

Log into you site. Now go to the shelf and click on Apps, which opens the App Store. Locate the Carousel app, and on the right side, click and drag “Install New” to a column of your layout.

Appstore with the Carousel app highlighted

To install a Carousel app, drag the “Install New” button to your layout

Once it loads, it may look like the following image.

A carousel app, just installed

This is the default look of the carousel app when you first install it

Change Text

Let’s start customizing it. Begin we the app title.

Editing the carousel app title

Double click to edit the title of the carousel, and format it

Double click on it to edit the wording and format. You can also modify its style dot.

Then you can also edit the other two lines. To do so, double click on them and customize it with the edit-in-place toolbar.

Click to edit text

You can edit the text and change the typeface, size, colors, etc.

Change the Image

The thumbnail on the right can be switched to a custom image you provide. To change it, hover over it and notice how your mouse icon changes to a pencil, indicating you can edit.

Hovering over the carousel image thumbnail

Notice the pencil icon when you hover over the thumbnail

Double click it and the image editor will open.

Image editor for the carousel app

Double click on “Replace” on the image editor to change the image

This image can be either from your computer, or from a public URL.

Image selector dialog box

Select an image from a public URL on the Internet, or browse your files

Once you upload your image, you can add an “Alt” attribute. It should be a written description of the image. This text will help search engines identify what the image is, since they can’t interpret pictures.

Add/Remove/Reorder Entries

So far so good. You now have your first item fully set. But the carousel allows for more items. To insert another one, click on the plus icon on the app toolbar.

The "New Entry" button, click it to insert one

Click on the page-with-a-plus-sign button on the app toolbar to insert an item

Now you have another set of image and text that can be edited just the same.

Carousel app with two items

An item has been added to the carousel app

You can add as many entries as you need. But what if you don’t need any of your items anymore? You can remove entries by clicking on the small “X” right between the “Footnote” and the app “pagination”.

Remove button below the carousel

To remove an item from your carousel, click the small “X” below your app

There’s one more thing to do here, in case you want to change the order in which your items appear. To reorder your items, click on the arrows icon right next to the “Remove” button.

Reorder button for your carousel items

Clicking on the reorder button will open a panel to change the order of your items

The screen that loads will allow you to drag and drop items as you need to show them.

This is the window panel where you can reorder your items

Click and drag your items to change the display order, and hit close

Edit settings

And lastly, you have the settings options.

App toolbar, highlighting the "Edit Settings" button

To edit the options for this app, click on the wrench icon on the app toolbar

Clicking the wrench icon will open the settings for the carousel.

Settings for the carousel app

Here you can set the number of entries, and enable/disable style and geometry propagation

The first option lets you set how many entries you want to show at the same time. Throughout this article we have used only one item at the same time, but here’s how it would look if we select 2, for example.

The carousel app displaying 2 items at the same time

You can display 1, 2, or more items at the same time in the carousel app

Style propagation and geometry propagation is turned on by default. But you can disable it here to keep this app independent of other versions. Learn more in the articles linked before.

If there’s something missing, please let us know below!