← All sections
Carousel Ring 3D
Your collection on a rotating 3D ring: one product in focus, ready to add in a single tap.
Install
One file: sections/mf-carousel-ring-3d.liquid. It appears in the theme editor as EX · Carousel ring 3D.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"https://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-carousel-ring-3d.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Carousel Ring 3D" (carousel-ring-3d) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Carousel ring 3D. Every text, color and product is a setting.
Pro
The Liquid for Carousel Ring 3D is part of Unlimited
The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.
Why it converts
Guided discovery: one product in focus at a time cuts choice overload, while the ring behind it signals the depth of the range.
Specs
About this section
Carousel Ring 3D is a Shopify Online Store 2.0 collection section that places products on a rotating 3D cylinder. Cards come from a collection the merchant picks, using the main or the second product image; collections with fewer than six products repeat so the ring stays full. The front card scales up and is fully lit while side cards dim and soften with depth, above a glossy floor reflection. A glass dock under the ring shows the focused product: type, title, star rating from the standard reviews metafields, price with compare-at, a variant selector when needed and a Quick add button built on the real product form, enhanced with the AJAX Cart API and falling back to a normal submit. Visitors drag or swipe with inertia, use the arrows, the progress ticks or the left and right keys, and click a side card to bring it forward. Autoplay advances one product at a time and pauses on hover, focus and drag. The theme editor controls the heading with an italic serif accent, text, a view-all link, products in the ring, card width, ring spacing, camera tilt, corner radius, reflection, autoplay timing, every label and the background, text and accent colors. The conversion principle is guided discovery: one product in focus reduces choice overload while the ring signals the depth of the range. On phones the cards resize and the dock stacks with a full-width action; with reduced motion the ring snaps without animation. One self-contained .liquid file, no libraries or external assets.
Questions
How do shoppers move the ring?
They can drag with a mouse or swipe on touch, and the ring keeps spinning with inertia before snapping to the nearest product. The arrow buttons, the progress ticks, the left and right arrow keys and a click on any side card also rotate it.
Does Quick add work with products that have variants?
Yes. Single-variant products add directly. Products with variants show a compact selector inside the same product form, so the shopper picks a size or scent first. Sold-out variants are disabled and sold-out products show a disabled button and a Sold out badge.
What if my collection has only a few products?
Collections with fewer than six products are repeated around the ring so it never looks sparse. The counter and progress ticks still count your real products, and with no collection selected the ring shows designed placeholder cards.
Is it accessible and theme-compatible?
The product details live in a real text panel with labelled buttons, keyboard arrows, focus states and a polite live region for cart updates. Styles are scoped and use pixel units, so it works on Dawn, Horizon and premium Online Store 2.0 themes.