Image Carousel
Display promotional images, banners, and campaign visuals at checkout with an interactive slideshow. Buyers see your content while completing their purchase — with optional links to drive traffic to promotions.
Requires Shopify Plus. Image Carousel uses Checkout UI Extensions, which are available on Shopify Plus plans.
What it does
Image Carousel lets you create slideshows that display at checkout:
Upload images — banners, product photos, campaign visuals (PNG, JPG, SVG, WebP, GIF)
Add links — make images clickable to drive traffic to promotions or collections
3 layout styles — auto-play only, navigation buttons, or scrollable
Auto-play — slides advance automatically at your chosen speed
Frame sizing — control the exact width and height of the carousel
Step 1: Go to Extra Widgets
In the app sidebar, click Extra Widgets. Find the Image Carousel card and click Manage.
List page overview
Widget ID
Auto-generated unique ID (e.g., carousel_a1b2) — used in Theme Editor
Name
Carousel name for your reference
Status
Active (live at checkout) or Inactive
Layout
Display mode: None, Navigation, or Scrollable
Actions
Activate/Deactivate, Edit, Delete
Each carousel has a unique Widget ID. You'll need this ID when adding the block in the Theme Editor.
Step 2: Create a new carousel
Click Create carousel (top right). The editor opens with settings on the left and a live preview on the right.
Step 3: Configure name and status
Carousel name
A name for your reference (e.g., "Summer Sale Banner"). Not shown to buyers.
Status
Active — carousel shows at checkout. Inactive — saved but not displayed.
Step 4: Configure layout and display
Layout style
Choose how buyers interact with the carousel:
None
Shows one image at a time, no controls
Yes — slides advance automatically
Enable navigation buttons
Prev/Next buttons + dot pagination
Optional — can be turned on/off
Enable scrollable
All images in a horizontal row, buyer scrolls
No — buyer scrolls manually
Button position (Navigation layout only)
Under images
Prev/Next buttons and dots below the image
Beside images
Prev/Next buttons on left/right sides of the image
Auto-play settings
Enable auto play
Toggle on/off. Available for "None" and "Navigation" layouts.
Auto play speed
Slider from 1 to 10 seconds. Controls how fast slides advance. Default: 5 seconds.
Frame size
Width
Frame width in pixels. Default: 500px.
Height
Frame height in pixels. Default: 200px.
The carousel automatically scales to fit the checkout container. Frame size sets the aspect ratio — the actual display width adapts to the available space.
Image fit
Cover
Image fills the entire frame. May crop edges if the aspect ratio doesn't match.
Contain
Image fits entirely within the frame. May show empty space if the aspect ratio doesn't match.
Step 5: Add slides
Click Add slide to add images to your carousel.
Per-slide settings
Image
Upload an image (PNG, JPG, SVG, WebP, or GIF). Max 2MB per image.
Image label
Text for screen readers (accessibility). Not visible to buyers.
Link to
Optional URL. When set, buyers can click the image to visit the linked page.
Managing slides
Add slides — click Add slide at the bottom
Reorder — drag and drop slides using the handle
Delete — click the trash icon on any slide
Use images with the same aspect ratio as your frame size to avoid cropping (Cover) or empty space (Contain). For example, if your frame is 500 x 200px, use images with a 5:2 ratio.
Step 6: Add the block in Theme Editor
After saving your carousel in the app, add it to your checkout page:
Go to Shopify Admin → Online Store → Customize
Navigate to the Checkout page in the theme editor
Click Add block → select AOV.AI Image Carousel
In the block settings, enter the Widget ID you copied from the app
Position the block where you want it (main content area or Order Summary sidebar)
Click Save in the theme editor
Where to find the Widget ID: Open the carousel in the app editor — the Widget ID is shown at the top. Click the copy button to copy it to your clipboard.
Layout comparison
Shows one image at a time
Yes
Yes
No (all visible)
Prev/Next buttons
No
Yes
No
Dot pagination
No
Yes
No
Auto-play
Yes (always)
Optional
No
Buyer scrolls
No
No
Yes
Best for
Simple banners
Multiple promotions
Product galleries
Tips
Use consistent image sizes — all slides should have the same dimensions to avoid jarring transitions
Limit to 5-6 slides — too many slides means buyers won't see them all before completing checkout
Use "Navigation" layout for multiple promotions — buyers can browse at their own pace
Use "None" layout for simple rotating banners — clean look with no controls
Add links strategically — link to promotions, collections, or product pages for cross-sell opportunities
Test in sidebar vs main column — carousel looks different in each position. "Under images" button position works best in the sidebar.
FAQs
Q: Do I need Shopify Plus for Image Carousel? A: Yes. Image Carousel uses Checkout UI Extensions, which require Shopify Plus.
Q: What image formats are supported? A: PNG, JPG, SVG, WebP, and GIF. Maximum 2MB per image.
Q: Can buyers click on images? A: Yes, if you add a URL in the Link to field. The link opens in a new tab.
Q: What happens if the carousel is set to Active but no images are uploaded? A: The carousel won't display at checkout if there are no slides.
Q: Can I use different Widget IDs for different checkout pages? A: Each carousel has one Widget ID. You can create multiple carousels with different IDs and add them as separate blocks in the Theme Editor.
Q: Does auto-play work on mobile? A: Yes. Auto-play works on all devices. Navigation buttons and scrollable layouts also work on mobile with touch gestures.
Q: How do I change the carousel position at checkout? A: Reposition the block in the Theme Editor — drag it to a different location in the main content area or Order Summary sidebar.
Q: What's the recommended frame size? A: For the main content area, try 600 x 250px. For the Order Summary sidebar, try 380 x 200px. Adjust based on your images.
Q: Can I use GIFs for animated slides? A: Yes. GIF files are supported and will animate in the carousel.
Last updated