Editor - Adding a Product Carousel Element

Imagine you’re browsing through an online store, checking out a cool new gadget. You want to see it from every angle, zoom in on the details, and maybe even explore different colors or versions. That’s where the product carousel comes into play. It’s like a mini-gallery, allowing you to swipe through multiple images of the same product without leaving the page.

In ClickFunnels, the Product Carousel feature is your go-to tool for enhancing your checkout page. By adding a product carousel, you give your customers the opportunity to explore your product visually, making it easier for them to make a buying decision.

In this article, we’ll guide you through the simple process of using the Product Carousel element in ClickFunnels.

The “Product Carousel” Element is only supported in the new/default Checkout element and is not compatible with the Legacy Checkout element.

Table of Contents

• Requirements
• Upload Images to Product
• Adding a Product Carousel Element in the Page Editor
• Product Carousel Settings
• Previewing Product Carousel
• Additional Information

Requirements

• An active ClickFunnels account
• A product is created with multiple images
• A product is attached to the funnel step
• A checkout element is added in the editor

Upload Images to Product

For the product carousel element to display product images, you need to add more than one image in the product settings. Follow these steps to add images to a product:

1. Navigate to Products in the side navigation menu.

   

2. Select All Products.
3. On the right-hand side, locate your desired product. You can either click on the product itself, its image, or the settings ⚙ icon to access product settings.

4. Scroll down to the Images section and click Add Image.

   

5. Choose multiple images from the image gallery and click Select images.
6. Finally, click Update Product.

Back to Top

Adding a Product Carousel Element in the Page Editor

Once you’ve successfully uploaded multiple images to your product and linked to a funnel step, you’re ready to incorporate a product carousel element into your page editor. Here are the steps to add a “product carousel” element in the page editor:

1. Open the Page Editor for the page where you want to add the “product carousel”.

2. Within a Section and Row, click on the orange color Add Element option to access available elements.

3. A widget will appear on the right side, displaying all available elements.

4. Navigate to Checkout in the left menu.

5. Choose the Product Carousel element to insert it into the editor.

   

Back to Top

Product Carousel Settings

1. Top Margin:
   • Adjust the space above the element to create separation from the preceding element.

2. Main Image:
   The “Main Image” option allows you to adjust the product main image placeholder that is in view.

   

   • Height: Adjust the height of the main image container.
   • Mobile Height: Adjust the height of the main image container for mobile devices.
   • Fit: Select how much space the main image should occupy within the container.
   • Corner: Toggle on and customize the corner styles by adjusting the corner options to add a border radius to the main image container.
   • Border: Toggle on and customize the border styles by adjusting the border options for the main image container.
   • Shadow: Toggle on and customize the shadow styles by adjusting the shadow options for the main image container.
   • Background: Toggle on and customize a background color or image by adjusting the background options for the main image container.

3. Thumbnails:
   The “Thumbnails” option allows you to adjust the product thumbnail images placeholder.

   

   • Show Thumbnails: Toggle on or off to display or hide the thumbnails in the preview.
   • Height: Adjust the height of the thumbnail images container.
   • Mobile Height: Adjust the height of the thumbnail images container for mobile devices.
   • Number of thumbnails: Choose how many images to display in the thumbnail container.
   • Space Between Thumbnails: Adjust the spacing between each thumbnail.
   • Scrollbar bg color: Set the background color of the thumbnail scrollbar.
   • Navigation color: Change the color of the ‘arrow icons’ used to swipe images left or right.
   • Fit: Determine how much space the thumbnail images should occupy within the container.
   • Corner: Toggle to add and adjust the border radius of the thumbnail images container.
   • Border: Toggle to add and adjust the border styles of the thumbnail images container.
4. Padding:
   • Add “Top”, “Bottom” and “Left+Right” padding inside the container by adjusting the padding options.
5. Corner:
   • Toggle to add and adjust the border radius of the “product carousel” container.
6. Border:
   • Toggle to add and adjust the border styles of the “product carousel” container.
7. Shadow:
   • Toggle on and customize the shadow styles by adjusting the shadow options for the “product carousel” container.
8. Background:
   • Toggle on and add a background color or image by adjusting the background options for the “product carousel” container.

Back to Top

Previewing Product Carousel

Once you’ve set up the checkout page, it’s important to preview how it appears on different devices. That way you can make any necessary adjustments to ensure a smooth user experience. To preview the product carousel, follow these steps:

1. In the page editor, navigate to the top right corner and click the Eye icon.
2. Alternatively, you can go to the funnel and click on the Page URL in the page thumbnail.

3. The page will open in a new tab, and the product carousel element will automatically display the product images.

   

Back to Top

Additional Information

• Products - How to Manage Products
• Funnels - How to Attach a Product to a Funnel Step
• Smart Checkout Guide - How to Add a Smart Checkout

Back to Top