Pro
← All sections
Ingredient Spotlight
Put the formula on a pedestal: every active orbits the product, dosed and explained.
Install
One file: sections/mf-ingredient-orbit.liquid. It appears in the theme editor as EX · Ingredient orbit.
- 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-ingredient-orbit.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Ingredient Spotlight" (ingredient-orbit) 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 · Ingredient orbit. Every text, color and product is a setting.
Pro
The Liquid for Ingredient Spotlight 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
Showing each active, its dose and its benefit beside the product justifies the price and builds trust that the formula works.
Specs
About this section
Ingredient Spotlight is a Pro Shopify Online Store 2.0 section that turns an ingredient list into a product story. The product stands in the centre on a softly lit pedestal, framed in an arch or shown as a cut-out when you upload a transparent PNG, and up to six ingredient markers sit around it on an orbit. On desktop each marker shows a dose and a name and is joined to the product by a thin curved line that draws itself in as the section scrolls into view. Hovering, tapping or tabbing to an ingredient opens its detail card with a one-line benefit and an optional swatch image, colours its line with a pulse of light travelling into the product, tints the pedestal glow in the ingredient's colour and dims the other markers. While nobody interacts it can highlight each ingredient in turn, stopping the moment a visitor takes over. On tablets and phones the product sits on top and the ingredients become a list of cards with every benefit visible. Merchants set the product (on product pages it defaults to the one being viewed), a custom image and its style, heading, text, hint, button label and link, price in the button, a note, padding and six colours. Each ingredient block has a name, dose, benefit, colour and image. The conversion principle is transparency: showing what is inside, at what dose and why it matters justifies a premium price. It is one self-contained file with scoped CSS and JavaScript, no external assets, and it respects prefers-reduced-motion.
Questions
How do I add or change the ingredients?
Each ingredient is a block. In the theme editor open the section and use Add block to add up to six. Set the name, the dose or percentage, a one-sentence benefit, a colour (used for the marker, its line and the pedestal glow) and an optional image. Markers are placed on the orbit automatically according to how many you add.
Which product image does the section show?
The Custom product image setting comes first, then the featured image of the product you pick. On a product page you can leave Product empty and the section uses the product being viewed. With no image at all, a designed CSS bottle appears so the layout never breaks. Choose the Cut-out style for transparent PNGs, Arch frame for regular photos.
How does it behave on mobile and for keyboard or screen-reader users?
Below 990px the orbit becomes a list of ingredient cards with every benefit visible, so nothing depends on hover. On desktop every ingredient is a button: tabbing to it opens its card, and screen readers announce the dose and name with the benefit as the description. With reduced motion the pulse, light sweep, line drawing and automatic highlight are switched off.
Will the automatic highlight distract shoppers?
It moves to the next ingredient every few seconds only while the section is on screen and the tab is visible, and it stops for good as soon as a visitor hovers, taps or tabs to an ingredient. You can switch it off with the Highlight ingredients one by one setting.
More sections
Pro
Pro