How to Capture a Full-Page Screenshot of a Shopify Store with HTMLCSStoImage

To capture a full-page screenshot of a public Shopify store with HTML/CSS to Image (HCTI), send a POST request to https://hcti.io/v1/image with the storefront URL, full_screen=true, and your HCTI UserID and APIKey as HTTP Basic credentials. This uses HCTI’s general public webpage capture API; it is not a Shopify-specific integration. The output contains the page’s full scrollable height rather than only the initial viewport.

The storefront must be publicly accessible. HCTI says it cannot capture private or authenticated content, and a site may block automated access. The examples below use https://your-store.example/ as a placeholder; replace it with the public URL you want to capture.

1. Prepare the Shopify page

Copy the complete URL of the storefront page, including the path and query parameters that matter to the capture.
Open it in a private browser window or another session without a Shopify login. Confirm it loads publicly.
Decide whether you need the whole page or a particular section. Use full_screen=true for the entire scrollable page; use a CSS selector when you only need a matching element such as product details or a footer.
Keep your HCTI UserID and APIKey private. Store them in environment variables or a secrets manager rather than committing them to source control.

2. Capture the full page with cURL

HCTI documents Basic authentication using the UserID and APIKey. The full-page setting can be sent as a form parameter:

export HCTI_USER_ID='YOUR_USER_ID'
export HCTI_API_KEY='YOUR_API_KEY'

curl --user "$HCTI_USER_ID:$HCTI_API_KEY" \
  --request POST \
  --form 'url=https://your-store.example/' \
  --form 'full_screen=true' \
  https://hcti.io/v1/image

HCTI returns a response containing the rendered image information. Follow the response format for your account and save or fetch the resulting image URL as needed. The vendor documents JSON and form-data request parameters; form-data is used here to keep the request easy to run from a shell.

3. Make the same request with Python

Install the HTTP client with python -m pip install requests, then run:

import os
import requests

user_id = os.environ["HCTI_USER_ID"]
api_key = os.environ["HCTI_API_KEY"]

response = requests.post(
    "https://hcti.io/v1/image",
    auth=(user_id, api_key),
    data={
        "url": "https://your-store.example/",
        "full_screen": "true",
    },
    timeout=120,
)
response.raise_for_status()
print(response.text)

This prints the API response. Use the returned image location or other response fields documented for your HCTI account to download and store the rendered file. A timeout in the client does not guarantee the server stopped processing, so avoid blindly retrying a slow request many times.

4. Make the same request with Node.js

This example uses Node.js’s built-in fetch and FormData APIs. Set the credentials in the environment before running it:

const userId = process.env.HCTI_USER_ID;
const apiKey = process.env.HCTI_API_KEY;
if (!userId || !apiKey) throw new Error('Set HCTI_USER_ID and HCTI_API_KEY');

const form = new FormData();
form.set('url', 'https://your-store.example/');
form.set('full_screen', 'true');

const credentials = Buffer.from(`${userId}:${apiKey}`).toString('base64');
const response = await fetch('https://hcti.io/v1/image', {
  method: 'POST',
  headers: { Authorization: `Basic ${credentials}` },
  body: form,
  signal: AbortSignal.timeout(120_000),
});

if (!response.ok) {
  throw new Error(`HCTI request failed: ${response.status} ${await response.text()}`);
}
console.log(await response.text());

Do not set the multipart Content-Type header yourself: the runtime adds the boundary required for a valid form-data request.

5. Tune full-page rendering

Full-page capture has to render the page and move through its scrollable content. Shopify storefronts may load product images or other content lazily, so the capture can take longer than a viewport screenshot.

Need	HCTI setting or approach	Trade-off
Capture the whole scrollable page	`full_screen=true`	Produces a tall image and usually takes longer than a viewport capture.
Capture one page section	Set `selector` to a CSS selector matching a rendered element.	The selector must match the page after it renders; it is not a substitute for a full-page capture.
Give dynamic or lazy content time	Increase `ms_delay`.	A fixed delay may waste time on fast pages and still be too short on slow ones.
Wait for the page to signal readiness	Use `render_when_ready=true` and have the page call `ScreenshotReady()`.	Requires code on the page to signal completion; it is not usually an option when capturing a third-party storefront you cannot change.
Increase pixel resolution	Set `device_scale` above its default where supported.	Higher device scale increases image resolution and file size.
Reduce output size	Use device scale 1 or choose WebP, where appropriate.	Choose the format based on the systems that will consume the image.
Control the layout width	Set the documented viewport width and height to the desired capture dimensions.	The viewport affects responsive storefront layout; choose the same width as the target use case.
Hide many consent banners	Set `block_consent_banners=true`.	HCTI describes this as hiding many such popups, not a guarantee that every banner is removed.

HCTI’s parameter reference also lists output formats including PNG, JPG, WebP, and PDF. For a long page, WebP or scale 1 can keep files smaller. The documentation notes output-height limits and jumbo dimensions for eligible requests; check the current parameter reference and plan eligibility for unusually long pages instead of assuming every storefront can fit in one image.

6. Handle lazy loading and dynamic storefront content

Some themes load images as they approach the viewport, and third-party scripts may add content after the initial page load. Full-page mode scrolls through the document, which gives below-the-fold content an opportunity to load. If images or sections are still missing, increase ms_delay and inspect the result.

If you control the page’s JavaScript, HCTI documents an explicit readiness mechanism: enable render_when_ready=true and call ScreenshotReady() once the content you need is ready. For a store owned by someone else, you generally cannot add that signal, so use a reasonable delay and verify the output visually.

A full-page screenshot is a rendered snapshot, not a guarantee that every interactive state or delayed third-party widget is represented. Check that variant selectors, review sections, cookie dialogs, sticky headers, and promotional content appear in the state you intended to capture.

7. Troubleshoot common problems

Symptom	Likely cause	What to do
The request is rejected or returns an authentication error	UserID or APIKey is missing, incorrect, or not passed as Basic credentials.	Check both environment variables and confirm the request uses `--user USER_ID:API_KEY` or an equivalent Basic Authorization header. Do not include extra spaces in the secret values.
The page cannot be loaded	The URL is private, requires a login, redirects unexpectedly, or blocks automated access.	Open the URL in a logged-out session, use its final public URL, and check whether the storefront blocks automated requests. HCTI’s documented URL capture is for public pages.
Only the top portion appears	`full_screen` was omitted, misspelled, or not sent as a true value.	Send `full_screen=true` as a request parameter and confirm the API accepted it.
Below-the-fold images or sections are blank	Lazy loading or storefront JavaScript had not finished when the capture ran.	Increase `ms_delay`. If you control the page, use the `ScreenshotReady()` readiness signal documented by HCTI.
The result is unexpectedly tall, slow, or large	The store has a long page, a large viewport, or a high device scale.	Use scale 1 or WebP to reduce file size, or capture a CSS-selected section if the complete page is not needed.
A cookie banner covers the storefront	The banner was not among the overlays hidden by HCTI’s consent-banner option.	Try `block_consent_banners=true`, then inspect the result. HCTI says it can hide many consent popups, not all of them.
A selector capture returns no useful content	The selector does not match an element in the rendered page, or the element appears later.	Inspect the storefront DOM, use a selector that matches the rendered element, and allow more time for delayed content.
The request times out in your application	The full-page render took longer than the client timeout, or the network stalled.	Allow a longer client timeout for long pages, check whether a response arrived before retrying, and avoid tight retry loops that can submit duplicate captures.

8. Reliability, performance, and cost considerations

Rendering time: Full-page mode takes longer than capturing the initial viewport because the renderer must traverse the page. Large product catalogs, long descriptions, and delayed scripts add work.
Repeatability: Storefront content can change between requests because of inventory, promotions, personalization, or scripts. Use a consistent URL, viewport, delay, and capture settings when comparing screenshots over time.
Output size: Tall pages and higher device scale create larger files. WebP and scale 1 are practical options when consumers do not require a lossless PNG at high resolution.
Failure handling: Check the HTTP status and API response before treating a request as successful. For batch jobs, record the URL and response, use bounded retries with backoff for transient failures, and keep credentials out of logs.
Cost: HCTI usage and pricing depend on its current account and plan terms. Check the vendor’s current pricing and plan limits before scheduling frequent full-page captures; this dossier does not provide a verified price or quota.

9. Or skip the browser setup

If you want a one-call URL capture without managing a browser or renderer, ScreenshotNeo is a website screenshot API and MCP server for developers. Its GET endpoint returns a screenshot or PDF. For Shopify, pass the public storefront URL:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://your-store.example/ \
  -o shopify-store.webp

See the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed, and response headers say the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

10. Frequently asked questions

Does this require a Shopify app?

No. HCTI captures the public storefront as a webpage URL; the described workflow does not use a Shopify-specific integration.

Not with the public URL workflow described here. HCTI says its URL screenshot feature cannot capture private or authenticated content.

Can I save the whole page as a PDF instead of an image?

HCTI’s parameter reference lists PDF as an output format. Select it when you need a document-style result, and confirm its current page and dimension limits for long captures.

Should I capture the whole store or just one product section?

Use full-page mode for a page-level record or review. Use a CSS selector when the task only needs one matching section and a very tall image would add no value.