How to Screenshot Product Pages When Prices Are Hidden Behind a Variant Selector

To screenshot a product price that appears only after choosing an option, open the product page, select the exact size, color, package, or other variant, and wait until both the selected option and its price are visible. Capture them together with the product name and enough context to identify the listing. A screenshot of one selected variant documents that option; it does not establish the price for every variant.

For a one-off screenshot, use the store in a browser and select the variant manually. For repeatable captures, automate the same interaction in a real browser and wait for the page to show the expected selection and price before taking the screenshot. A plain HTTP request may return the page’s initial HTML without running the scripts that update the visible price.

Why a product price may be hidden or ambiguous

Product options can correspond to distinct variants, each with its own price, image, and availability. A product page may update those details dynamically when you make a selection, or selecting an option may navigate to another page. An initial page or collection listing may show a default variant, a price range, or another general representation instead of the price for the variant you want to document. See the platform guidance from Shopify, WooCommerce, and Google Search Central.

For Shopify themes, the placement of sale pricing can vary by theme, and compare-at prices may differ among variants. Check what the product page displays for the selected variant. Do not treat a crossed-out reference price as the checkout price unless you have verified what it represents. Shopify’s sale-price guidance explains the distinction.

Take a clear screenshot manually

Open the product page. Start from the product detail page rather than relying on a collection card if you need to show a specific option’s price.
Choose the complete variant. Select every required option, such as size and color together. On a product with package size and finish selectors, set both. A partially selected state may not identify a purchasable variant.
Wait for the page to update. Confirm the intended option is still selected and the displayed price corresponds to it. Watch for a changed image, availability message, or page navigation that signals the variant changed.
Frame the evidence. Keep the product name or identifying listing context, selected option, and price in view together. Include sale or compare-at pricing and availability when those details matter to your record.
Capture and preserve context. Save the screenshot with the final URL. For a report or later comparison, record the capture date and time and the relevant market or currency.
Review the result. Check that the selection and price are legible and that the final URL or screenshot does not suggest the shown price applies to every variant.

Some stores encode a variant in the URL. Shopify supports deep links using a variant identifier, but URL behavior is store-specific. Preserve the final URL where possible and verify the rendered selection and price rather than assuming the URL alone proves the page state.

Screenshot checklist for price evidence

The exact size, color, package, or other variant is selected and legible.
The displayed price is visible and clearly associated with that selection.
The product name or other listing context identifies what is being priced.
Sale price, compare-at price, and availability appear only when relevant and visible.
The final URL is retained; record capture date, time, market, and currency for later comparison.
The surrounding report describes a selected variant rather than implying a universal product price.

Automate repeated captures with Playwright

For a small number of captures, manual interaction is usually simpler. If you need to repeat the same selection and capture across pages, a browser automation script can make the steps consistent. Playwright supports both page screenshots and element screenshots. The key is to wait for the expected selected state and price, not to rely only on a fixed delay.

The following runnable Node.js example uses Playwright. Replace the URL and the CSS selectors with selectors from the store you are capturing. The example selects a size, waits until the selected control and expected price are visible, then saves a screenshot and prints the final URL. Store pages vary, so the selectors and expected price must match the particular site.

import { chromium } from 'playwright';

const productUrl = 'https://example.com/products/item';
const sizeSelector = '[name="size"]';
const expectedPrice = '$49.00';
const priceSelector = '[data-testid="product-price"]';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });

try {
  await page.goto(productUrl, { waitUntil: 'domcontentloaded', timeout: 45_000 });
  await page.locator(sizeSelector).selectOption({ label: 'Medium' });

  // Verify the page reached the intended state, rather than assuming a delay was enough.
  await page.locator(sizeSelector).waitFor({ state: 'visible' });
  await page.waitForFunction(
    ({ selector, expected }) => {
      const price = document.querySelector(selector)?.textContent?.trim();
      const selected = document.querySelector('[name="size"]')?.value;
      return price === expected && selected !== '';
    },
    { selector: priceSelector, expected: expectedPrice },
    { timeout: 15_000 }
  );

  await page.screenshot({ path: 'product-variant.png', fullPage: false });
  console.log('Captured URL:', page.url());
} finally {
  await browser.close();
}

Install the dependency and browser once before running the script:

npm install playwright
npx playwright install chromium
node capture.mjs

If the store has separate controls for color and size, select both before checking the final state. If choosing a variant navigates to a new URL, wait for navigation or wait for the destination page’s expected state. Adjust the price check to match the site’s markup and formatting; a store may include currency text, whitespace, or a sale-price element. Avoid saving the screenshot until the product identity, chosen variant, and corresponding price are all visible.

Capture only the relevant product area

A viewport screenshot can show the page context around the product. If the product details are in a stable container and you need a tighter record, take an element screenshot after verifying the variant state:

const product = page.locator('[data-testid="product-details"]');
await product.screenshot({ path: 'product-variant-details.png' });

Use a selector that includes the product name, selected option, and price. A narrowly cropped price element alone may be difficult to interpret later. If you need surrounding context, use the full-page screenshot option instead of cropping.

Why raw HTML may not show the selected price

A request library that fetches HTML does not operate the page controls or necessarily run the JavaScript that updates variant details. The response can therefore contain an initial state, a generic price, or incomplete product markup. A browser is useful when the goal is a screenshot of the rendered page after interaction. Structured product data can help explain variant information, but it does not replace confirming what the selected page visibly shows when the deliverable is a screenshot.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call capture can screenshot a URL, but an API capture of a product URL does not itself choose a variant. If the page requires a selector interaction, first use a URL that reliably opens the intended selected state and verify the result; store URL behavior varies.

See the ScreenshotNeo API documentation for request options. Example using cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/products/item?variant=123 -o product-variant.webp

Replace the example URL with the verified URL for the desired variant. You can also make the same request in Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/products/item?variant=123"},
    timeout=90,
)
r.raise_for_status()
open("product-variant.webp", "wb").write(r.content)

Or Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/products/item?variant=123'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('product-variant.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. These capture features do not replace selecting and verifying the desired product variant.

Performance, reliability, and cost considerations

Manual capture: Best suited to a one-off screenshot. It avoids script setup, but the operator must verify each selected option and the updated price.
Browser automation: Useful for repeated captures when selectors and page behavior are stable. Browser startup and page loading take time; waiting for a specific state is more reliable than choosing an arbitrary delay.
Retries: If the page is stale or an update fails, reload or start a fresh capture, repeat all required selections, and verify the displayed state again. Do not treat a retry as proof that the price is correct.
Evidence retention: Save the final URL and capture time with the image. If the price may vary by market, preserve the relevant market or currency context too.
API cost: A screenshot API can reduce browser setup for URL-based captures, but it cannot infer a desired variant that the URL does not select. Confirm the variant URL behavior before using it in a repeated workflow.

Troubleshooting

Problem	Likely cause	What to do
Price is blank or unchanged	A required option is missing, the combination is unavailable, or the page has not finished updating.	Select every required option. Confirm the combination exists and is available, then wait for the price to update and verify it against the selected state.
Screenshot shows the wrong price	The capture happened before the variant update completed, or the control selected a different option than intended.	Check the visible selection and price immediately before capture. In automation, wait for the expected selected value and price text.
Variant selection navigates away	The store uses a separate page or URL for that variant.	Wait for navigation to finish, inspect the final URL, and confirm the destination page still shows the intended option and price.
Automation cannot find the selector	The example selector does not match the store’s markup, or the control is rendered later.	Inspect the rendered page, use a selector specific to that store, and wait for the control to become visible before interacting.
Automation times out waiting for price	The expected text or price selector differs from the actual page, or the chosen combination is unavailable.	Inspect the price element and its exact rendered text. Update the selector or expected value, and check availability and required options.
Collection page shows a range or general price	The listing represents multiple variants or a default rather than the chosen option.	Open the product detail page, select the exact variant, and capture the variant-specific display.
Sale and crossed-out prices are confusing	The theme’s sale-price display or variant compare-at values may differ.	Record the selected variant’s displayed values and label them accurately; do not describe a compare-at price as the checkout price without verification.
Page looks blank or incomplete in an API capture	The site may be loading slowly, showing a bot check, or failing to render the intended state.	Check the response verdict and billing headers where available. Verify the URL and rendered page state before using the capture as evidence.

Frequently asked questions

Does a screenshot prove that the price is available to every shopper?

No. It records what was visible for the selected option and page context at capture time. Availability and pricing can depend on variant, market, and time.

Should I capture the whole page or just the product section?

Capture enough context to identify the product and associate the selected option with its price. A product-section capture can work if it includes those details; use a larger view when the surrounding listing or availability message matters.

Can I use a collection-page screenshot?

Use one only if it visibly identifies the exact selected variant and its price. Collection displays may show a range or general price, so the product detail page is usually clearer for variant-specific evidence.

What should I keep with the screenshot for a later comparison?

Keep the final URL and note the capture date and time, market, and currency when relevant. Those details help explain what the image records if the product page changes later.