Carousel

The Carousel section lets customers flip through customizable "cards", left or right, like a carousel ride.

Set up a carousel on the home page

To set up a carousel section:

STEPS

1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

2. Scroll down the list of home page settings until you see the Add section button.

3. Choose Carousel from the list of sections.

   This opens the carousel settings.

4. Choose the Section height on mobile.

   Choose between 20% and 100% percent, where 100% is the entire height of the mobile device's screen.

5. Return to the list of Home page sections to find your new Carousel section with the content blocks nested below.

Use the drag handles to rearrange the order of the blocks:

5. Use the Add image button to add a block to the carousel.

   This opens the settings panel for the new carousel block.

   You can repeat this step for each block you want to add. You can also use the Remove block button to remove a block from this section entirely.

6. Add an Image for the current block.

7. Add Mini heading text and a Heading.

   The mini heading is smaller text displayed above your heading. If you're using the carousel to highlight many different kinds of things, you could use the mini heading to distinguish between "Products", "Collections", "Blog posts" and so on. Or, you could choose to leave it blank.

   You can see a mini heading in the image below:

8. Add Subheading text to be displayed below the heading.

9. You can choose how wide the heading and subheading text can appear with the Text max width slider.

10. Add a Button text and Button button to be displayed as a call to action button on the carousel block.

11. Choose the Text alignment for this content block.

    There are lots of options. For more information about them, see Text alignment in carousel blocks.

12. Tweak the Overlay opacity.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

13. Change the color of the Overlay, all of the text (the Heading, Subheading, and Button text), as well as the Button background.

14. Click Save.

Settings reference

Each carousel content block has the following settings:

Image

Add or upload an image for the current carousel block.

Mini heading

Add mini heading text, which is smaller text placed above the heading.

This text uses your Mini heading typography styles.

See Typography for more information.

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Text max width

Change how wide the carousel heading and subheading can be at maximum.

This breaks your heading across multiple lines if it is too long.

Button text

Add custom text for your call to action button.

We recommend keeping this between 1 and 3 words.

Button link

Choose a link that the call to action button should lead to.

Text alignment

Choose how the text inside the current carousel block should be aligned.

For more information about each option, see Carousel text alignment.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Each carousel section has the following settings:

Section height on mobile

Set how tall this section appears on mobile devices.

Mini heading

Pick the color of the mini heading text.

Heading

Pick the color of the heading.

Subheading

Pick the color of the subheading text.

Button background

Pick the button background color.

Button text

Pick the button text color.

Settings reference

In the Carousel home page section, you can change how text is aligned in each image block.

The following Text alignment settings are available:

Top left	Top center	Top right
Middle left	Middle center	Middle right
Bottom left	Bottom center	Bottom right
Split left	Split center	Split right

In the following video, you can see where each of these settings would place your text: :

• Home page

• Typography