Product pages

Mercer’s product page (PDP) ships three merchandising features that are easy to miss because most of them are driven by Shopify data rather than theme settings: Quick view, pickup availability, and 3D / video media. This guide explains how each one is turned on, what shoppers see, and the common gotchas.

Quick view

Quick view lets a shopper preview a product — gallery, variants, and add-to-cart — in a modal, without leaving the collection they are browsing.

Enable or disable it

Quick view is controlled by a single global setting, on by default:

Theme editor → Theme settings → Product page → Show Quick view button on product cards

Turning it off does more than hide the button — it also skips loading the Quick view stylesheet and scripts, so there is no asset cost on a store that doesn’t use it. There is no per-section toggle; the setting applies everywhere at once.

Where it appears

When enabled, a Quick view button renders on every product card, which means it shows up anywhere cards appear:

• Collection grids
• Search results
• Related products and “recently viewed”
• Cart drawer cross-sell

The button is always visible (not a hover-only overlay), so it works on touch devices.

Product-page and cart recommendations

The product page’s Pairs well with section uses the product’s custom.pairs_with product-reference list when populated, with Shopify recommendations as its fallback. The cart drawer’s similarly named cross-sell reads custom.complementary from the first cart line’s product and displays up to four products. The cart drawer does not read custom.pairs_with or use that section’s recommendation fallback.

Populate the field for the surface you want to configure. Setting one does not populate the other.

What’s in the modal

Quick view reuses the real PDP building blocks, so the modal is a compact product page:

• Media gallery (with image zoom)
• Title, vendor, and price (including sale and unit pricing)
• Variant picker (color swatches and size chips)
• Quantity selector and Add to bag
• Back-in-stock request form for sold-out variants (so a shopper can submit a restock request without leaving the modal)
• Subscription / selling-plan options, when the product has them
• Pickup availability (see below)
• B2B quantity rules, for B2B customers
• A View full details link to the complete product page

It deliberately omits long-form PDP content — editorial story, description body, related products, reviews — which is why the View full details link is always present.

Notable behaviors

• Gift cards and subscription-only products don’t show the Quick view button by design — shoppers go to the full product page for those instead.
• Products with more variants than Shopify loads into the card also fall back to the full product page — the card can’t render a complete variant picker, so the Quick view button is suppressed.
• No JavaScript: the button is hidden and the card’s normal link takes the shopper to the full product page.
• Accessibility: the modal is a native dialog with a focus trap, closes on Esc, returns focus to the card the shopper opened it from, and announces price/availability changes to screen readers.

Pickup availability

Mercer shows local-pickup availability directly under the add-to-cart button on the product page.

There is no theme setting for this

This trips people up, so it’s worth stating plainly: pickup availability has no theme setting and no separate block to add. It travels with the Buy buttons block (present in the default product layout) and appears automatically whenever Shopify reports pickup data for the selected variant. The only way to remove it from the theme side is to remove the Buy buttons block — which you almost certainly don’t want to do.

Turn it on in Shopify admin

Pickup is driven by Shopify’s per-variant location data. A single pickup-enabled location is enough.

1. Have at least one location that fulfills online orders.
2. Go to Settings → Shipping and delivery → Pickup in store, select the location, enable pickup, and set its expected pickup time.
3. Check that the product is physical and stocked at a pickup location. Shopify determines availability, including any configured store transfers.

Mercer renders the summary whenever the selected variant returns at least one pickup-enabled availability entry. An unavailable entry can still produce an “unavailable” message; it is not the same as having no pickup data. See Shopify’s pickup setup guide  for current eligibility and configuration requirements.

What shoppers see

• At least one available location: it reads Pickup available at the first available location, plus the pickup-time estimate if provided.
• Locations exist but the variant isn’t ready at any of them: “Pickup currently unavailable.”
• More than one pickup-enabled availability entry: a “Check availability at N stores” button opens a dialog listing every location with its status (“Available for pickup” / “Currently unavailable”), pickup time, and full address. Unavailable locations are shown too, on purpose, so shoppers can see all their options.

Availability re-checks automatically each time the shopper switches variants — there’s nothing to refresh.

”Pickup isn’t showing up”

Check that Buy buttons is present, pickup is enabled for the location, and the selected variant is eligible for Shopify’s pickup availability data. A single-location store is supported; it shows the inline summary without a multiple-location dialog. If entries exist but none are available, expect an unavailable message rather than a hidden summary.

3D and video media

Mercer’s product gallery renders every media type Shopify supports — photos, video, and 3D models — in the same gallery with a thumbnail rail.

Supported media

The gallery renders media in the same order you arrange them in admin. If you assign a piece of media to a specific variant, the gallery jumps to it when the shopper selects that variant.

There are no media settings (by design)

Mercer intentionally exposes no theme settings for autoplay, loop, or mute. This is a deliberate merchandising choice, not a missing feature:

• Video never autoplays. Shoppers press play themselves, and hosted video plays with sound (it is not muted).
• 3D models don’t auto-rotate. The model loads and responds only when the shopper interacts with it.

This keeps product pages calm and fast, and avoids the layout jank and bandwidth cost of background-playing media.

How it appears on the page

• Video and external-video thumbnails get a play badge; 3D model thumbnails get a “3D” badge.
• 3D models use Shopify’s hosted interactive viewer. Mercer does not currently add a separate View in your space AR button.
• Image zoom applies to photos only; video and 3D have their own controls.

Performance

Mercer keeps the gallery lean:

• The 3D viewer loads only when a product actually has a 3D model — it’s served by Shopify’s hosted runtime, so image- and video-only products pull in none of that weight.
• The first (and variant-matched) image loads eagerly and owns the page’s main image paint; every other slide lazy-loads.
• Hosted video loads only its metadata until the shopper presses play.

So adding one 3D model affects only that product’s page, not the rest of your catalog.

What’s next

• Section reference — composing the rest of the product page and every other section.
• Gift card recipient flow — the gift-card PDP.
• B2B — wholesale pricing, quantity rules, and quick order on the PDP.
• Still stuck? Contact support — we reply within two business days, as explained in our support policy.