← All sections

Product Spotlight

A complete, conversion-tuned buy box: gallery, variants, urgency and one-tap add to cart.

ProProduct page47 settingsInstall
Full screen ↗

Install

One file: sections/mf-pdp-spotlight.liquid. It appears in the theme editor as EX · Product spotlight.

  1. Connect EXPERAISE Sections to Claude (once). In Claude Code:
    terminal
    claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"
    In the Claude app: Settings → Connectors → Add custom connector → https://sections.experaise.com/api/mcp. Full setup
  2. Ask Claude. It fetches sections/mf-pdp-spotlight.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.
    prompt
    Install the EXPERAISE Sections section "Product Spotlight" (pdp-spotlight) 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.
  3. Customize. Online Store → Themes → Customize → Add section → EX · Product spotlight. Every text, color and product is a setting.
Pro

The Liquid for Product 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.

Get Unlimited · €99/year →What's included
Why it converts

Price, saving, stock, dispatch time and trust all sit beside the button, removing the doubts that stall a purchase.

Specs

File: sections/mf-pdp-spotlight.liquidIn the theme editor: EX · Product spotlightBest on: product, index, page templatesSettings: 47 · blocks: Benefit, Collapsible tabValidated: Shopify Theme Check, no external assets

About this section

Product Spotlight is a Pro Shopify Online Store 2.0 section that replaces the main product area with a complete buy box. It shows the product picked in the section, else the page's product, else a designed empty state. On the left, a gallery built from product.media crossfades the main image when a thumbnail is chosen; on phones it becomes a swipe gallery with scroll snap and dots. The buy box, sticky on desktop, holds an eyebrow (vendor, type or custom text), the title as H1 or H2, the star rating from the reviews.rating and reviews.rating_count metafields linking to #reviews, the price with the compare-at price and a Save X% badge, a short description, and variant pills built from options_with_values. Picking a variant updates price, saving, image, stock line, button label, the sticky bar and the ?variant= URL. A low-stock line with a pulsing dot appears when a tracked variant falls under your threshold, and a dispatch countdown computed from your cutoff hour and store time zone reads, for example, Order within 3h 12m for dispatch today. Add to cart uses Shopify's AJAX Cart API with loading and success states, falls back to a normal form submit, and dispatches cart:refresh and mf:cart:added. Benefit blocks form a trust row under the button; collapsible blocks become accordions set under the gallery on desktop and after the buy box on phones. A sticky add-to-cart bar slides up once the main button leaves the screen. The conversion principle is doubt removal at the moment of intent. It is one self-contained file that respects reduced motion.

Questions

How does the section know which product to show?

It uses the product picked in the section's Product setting. If that setting is empty, it uses the page's product, so on the product template it follows whichever product is being viewed. On a home or landing page with no product picked, it shows a designed empty state until you choose one.

Where do the low-stock line and the dispatch countdown come from?

The low-stock line reads the selected variant's inventory quantity and only appears when Shopify tracks inventory for it and the quantity is at or below your threshold. The countdown is computed in the browser from the Daily dispatch cutoff hour in your store's time zone, skips weekends unless you allow them, and switches to tomorrow or the next weekday after the cutoff.

Does add to cart work with my theme's cart drawer?

Items are added with Shopify's AJAX Cart API, then the section dispatches cart:refresh and mf:cart:added events that many themes and cart apps listen to. If your drawer does not refresh, set After adding to cart to Go to cart. If JavaScript fails, the button submits the real product form, so shoppers can always buy.

Is it accessible and does it work with the dynamic checkout button?

Variants are native radio buttons inside labelled fieldsets, so they work with the keyboard and screen readers; the gallery and quantity controls are real buttons with labels, and add-to-cart results are announced in a live region. The Buy it now or Shop Pay button is Shopify's own payment_button, styled to match, and hidden automatically when a variant is sold out.

More sections