How to Take a Full-Page Screenshot of a Lazy-Loaded Shopify Collection

To capture a complete Shopify collection page, first scroll through it in manageable steps and pause while below-the-fold product images load. Then use Chrome DevTools’ full-page screenshot command. Inspect the saved image from top to bottom; if product tiles or rows are missing, load that section and capture again. A full-page capture can include content beyond the viewport, but it does not guarantee that every theme’s lazy-loading code has run.

This workflow is for a collection page that loads more images as you scroll. Shopify theme code, apps, pagination, filters, browser versions, and network conditions can all affect what appears. Verify the output for the specific collection you need. Shopify recommends lazy-loading images outside the initial viewport and says, “Never lazy-load the LCP image.” Shopify’s theme performance guidance explains the distinction.

1. Prepare the collection page

1. Open the exact collection URL in Chrome. Set any filters or sort order you want represented in the screenshot.
2. Wait for the initial product rows and visible page content to settle. If a consent prompt blocks the page, handle it as a visitor would before proceeding.
3. Scroll down by a few rows at a time. Pause briefly when new rows enter view so their images and other content have time to load.
4. Continue to the intended end of the collection. If the store appends products while scrolling, keep going until no new rows appear. This behavior depends on the store and is not guaranteed by Chrome’s capture command.
5. Return to the top before capturing if you want the screenshot to start at the beginning of the page. Keep the same tab open.

The preparation step matters because Shopify themes commonly use lazy loading for images outside the initial viewport. Scrolling brings those images into view and gives the page an opportunity to request and render them. The exact timing is theme- and network-dependent.

2. Capture the full page with Chrome DevTools

1. Open DevTools: press F12 or Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS. You can also right-click the page and choose Inspect.
2. Open the DevTools Command Menu with Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS.
3. Search for Capture full size screenshot and select the matching command.
4. Choose where to save the resulting image when Chrome prompts you.
5. Open the image and check the top, middle, and bottom of the collection for blank image areas, missing rows, duplicate sticky elements, or a cut-off final row.

Chrome documents full-page capture among its DevTools screenshot techniques. A full-page capture takes a screenshot beyond the visible viewport; that alone does not establish that it triggered every page’s lazy-loading code. Scrolling and checking the result are essential.

3. Diagnose missing images or rows

Use DevTools’ Network panel when you need to see whether images were requested and when page content appeared. This diagnostic capture is a sequence of page-load frames, not the final full-page screenshot.

1. Open DevTools and select the Network panel.
2. In Network settings, enable Screenshots.
3. Reload the collection with the Network panel open. If you need to inspect a first-visit load, use the reload menu’s “Empty Cache And Hard Reload” option while DevTools is open.
4. Review the screenshot thumbnails alongside the network activity. Click a thumbnail to inspect the requests happening around that moment.
5. Look for image requests that are still pending, failed, or only initiated after the relevant section enters the viewport. Filter the request list by image type if needed.
6. Turn off Network screenshots when finished, scroll through the collection again, and repeat the full-page capture.

Chrome’s Network panel documentation describes its screenshot thumbnails as views of the page at points during loading, associated with network activity. They help diagnose timing; they do not replace the full-page capture.

4. Check the result before using it

• Product images: Check several rows, especially the first row below the initial viewport and the final rows.
• Collection completeness: Confirm the expected product count or last product is present. A page with pagination will not necessarily include products on later pages.
• Dynamic loading: Confirm the page stopped adding rows before capture. A capture made while the collection is still expanding may be incomplete.
• Sticky and floating UI: Look for headers, chat widgets, cookie banners, or other overlays repeated or covering products.
• Bottom edge: Make sure the last row and any collection content you need are not cut off.
• Image dimensions: Very long collections create tall image files. Check that your image viewer or downstream tool can open and process the full dimensions.

Options and practical limits

Need	Approach	Limit to keep in mind
One manual screenshot	Scroll to load collection content, then use DevTools’ full-page screenshot command.	You must verify lazy-loaded content and handle the page’s own overlays.
Find out when content appears	Enable screenshots in the Network panel and compare frames with requests.	These are load-time diagnostic frames, not one full-page image.
Collection uses pagination	Capture each page or filtered state separately if you need every product.	A full-page screenshot does not navigate to another page of results.
Collection appends products while scrolling	Continue scrolling until no additional rows appear, then capture.	Infinite-scroll behavior is store-specific; confirm the stopping point yourself.

Performance, reliability, and cost

For a one-off capture, Chrome DevTools is built in, so the workflow does not require a paid extension or a separate capture service. The main cost is time spent scrolling, waiting for image requests, and checking the output. A slow connection, large images, or scripts that delay rendering may require longer pauses and another capture.

For a repeatable process, record the collection URL, filter state, browser version, and whether the collection uses pagination or dynamic loading. Recheck the screenshot after theme or app changes. Browser capture is sensitive to the state of the page at capture time, and no generic wait guarantees that every store has finished rendering.

Troubleshooting

Symptom	Likely cause	What to do
Blank product tiles below the fold	The image request or rendering did not happen before capture.	Scroll the affected rows into view, pause for loading, then capture again. Use Network screenshots and image requests to diagnose timing.
Products are missing at the bottom	The collection appends rows dynamically, or the page had not finished loading.	Scroll until no new rows appear. Confirm whether the store paginates and capture additional pages separately if needed.
The screenshot contains only the visible viewport	A viewport screenshot command was selected instead of the full-size command.	Open the Command Menu and select Capture full size screenshot.
The collection changes while you prepare it	A filter, sort order, app, or other page behavior changed the product set.	Set the desired state first, wait for it to settle, then scroll and capture. Keep a note of the URL and selected state.
Network screenshots are missing	The Network panel was not recording when the page loaded, or its Screenshots option was off.	Open Network, enable Screenshots in Network settings, and reload with that panel open.
The image is too large to handle comfortably	A very long collection produced a correspondingly tall image.	Capture separate collection pages or states when pagination allows, or use an image workflow that supports large dimensions. Do not assume one giant image will be accepted by every downstream tool.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF; the example below saves a WebP screenshot of a collection URL. See the ScreenshotNeo API documentation for the available parameters and response details.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://your-store.example/collections/all",
    },
    timeout=90,
)
r.raise_for_status()
with open("collection.webp", "wb") as f:
    f.write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://your-store.example/collections/all'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await Bun.write('collection.webp', bytes);

Replace the example domain and collection path with your public collection URL, and provide your API key. ScreenshotNeo accepts the parameter names used by other screenshot APIs as well, which can make switching easier.

• Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each step can be turned off.
• Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers report the page verdict and billing status.
• An MCP server gives AI agents, including Claude, Cursor, and other MCP clients, the take_screenshot, get_page_info, and capture_pdf tools.
• The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

Sign up free for 1,000 screenshots a month, with no card required.

FAQ

Does Chrome’s full-page command trigger lazy-loaded images?

Do not rely on it to trigger every theme’s lazy-loading behavior. Scroll through the collection first, then inspect the saved image for missing content.

Are Network panel screenshots the same as a full-page screenshot?

No. They show the page at points during loading and help connect visual changes to network activity. Use the full-page command for the final tall image.

Will one screenshot include every product in a Shopify collection?

Only if those products are present on the loaded page. Pagination, filters, or store-specific dynamic loading may require separate captures.

Can I use the same workflow for other browsers?

This walkthrough uses Chrome DevTools’ documented commands. Other browsers may have different capture controls and lazy-loading behavior; verify their current documentation and inspect the output.