How to Screenshot Lazy-Loaded Items in a Shopify India Product Collection
Load lazy product images, capture the rendered collection in Chrome, and check whether pagination or infinite scroll means you need more than one screenshot.
Short answer: Open the Shopify collection in desktop Chrome, scroll down in stages, and wait for the product cards and lazy-loaded images you need to appear. Then open DevTools, search its command menu for “screenshot,” and choose “Capture full size screenshot.” Check the saved image: a full-page screenshot captures rendered page content, but it does not automatically include products on later collection pages.
This guide applies to Shopify collection pages generally; “India” in the title does not identify a particular storefront. Themes differ, so the steps below explain how to inspect what the page actually loads rather than promise that every store behaves the same way.
1. Load the products and images you want to capture
- Open the collection page in desktop Chrome and let the initial page settle.
- If cards or images below the fold are blank, scroll down about one screen at a time and pause for them to load. Repeat until the products you want are visible or have been appended to the page.
- Look for a “Load more” button, a pagination control, or products appearing as you approach the bottom. Use “Load more” when present. If the collection has numbered pages, note that each page may need its own capture.
- Before capturing, scroll back through the collection or otherwise inspect it for missing cards and blank images. Lazy image loading and fetching another page of products are separate behaviors.
Shopify’s collection example uses lazy loading for product images after the first few items. Its developer guidance also describes pagination and an infinite-scroll pattern in which an IntersectionObserver can trigger loading another page when a marker near the bottom enters view. These are documented patterns, not a guarantee about any particular store or theme. Shopify recommends limiting pagination depth to 25,000 objects or less and describes 12 to 50 products per page as a recommendation; those figures do not mean one screenshot can show an entire catalog.
2. Capture the full rendered page in Chrome
- Open DevTools: Ctrl+Shift+I on Windows or Linux, or Cmd+Option+I on Mac.
- Open the DevTools command menu: Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
- Search for
screenshotand select Capture full size screenshot. - Open the saved image and check the top, middle, and bottom of the collection. If a card or image is missing, return to the page, scroll and wait again, use the store’s load-more control, or capture later pagination pages separately.
The command name and shortcuts are reported in Chrome Help Community guidance; menus and shortcuts can vary by Chrome version. If the command does not appear, use the DevTools command menu search and check the commands available in your installed version.
3. Understand what the screenshot includes
| What you see | What it usually means | What to do |
|---|---|---|
| A product card is present, but its image is blank | The card has rendered, but its image may not have loaded yet. | Scroll it into view, wait, and inspect again before capturing. |
| The collection ends before the expected products appear | The remaining products may be on another paginated page or may require a load-more action. | Use the store’s pagination or load-more control and capture that content too. |
| New cards appear near the bottom while scrolling | The theme may append products through infinite scroll. | Continue scrolling in stages and wait until the desired set has appeared. |
| The screenshot is much longer than the visible browser window | The full-size command captured beyond the viewport. | Review the image for gaps; full-page coverage alone does not prove catalog completeness. |
For complete collection coverage, define the set you need first: one rendered page, all products reachable through infinite scroll, or every paginated collection page. Capture and check each required part. Do not treat a single full-page image as proof that every product in the catalog is included.
4. Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Images are blank in the saved screenshot | The image request had not completed, or the image was not brought into the page’s lazy-loading range. | Scroll down in stages, pause for images, then capture again. |
| Some product cards are missing | The page has not appended them yet, or they belong to another pagination page. | Reach the bottom gradually, use “Load more” if available, and capture later pages separately. |
| “Capture full size screenshot” does not appear | The DevTools menu may differ by browser version, or the command search is not open. | Open DevTools’ command menu and search for “screenshot.” Check the commands available in your Chrome version. |
| The full-page image omits products you saw on another page | A full-size capture covers the current rendered page, not every URL in a paginated collection. | Navigate to each required page and save a separate screenshot. |
| The layout changes while capturing | Content may still be loading or the storefront may respond to viewport and browser state. | Wait for the page to settle, keep the viewport consistent, and recapture. The exact theme behavior is store-specific. |
5. Keep captures reliable and manageable
- Wait for content, not just the initial page load. A page can be ready at the top while images further down have not been requested or completed.
- Use a repeatable scroll pace. Move down in stages and pause long enough to see whether cards or images appear.
- Record page coverage. When a collection is paginated, keep each page’s screenshot distinct so it is clear which products it contains.
- Check the output. Confirm that the first and last intended cards are present and that images are not blank. No single full-page capture guarantees completeness.
- Plan for time and file size. Longer pages and multiple collection pages take more scrolling and produce more output to inspect. Capture only the pages and content you need.
Or skip the browser setup
ScreenshotNeo can capture a page through one API request. Its full-page capture loads lazy images. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use the take_screenshot, get_page_info, and capture_pdf tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. See the API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
Replace the example URL with the Shopify collection URL. The API supports options including full-page capture and custom waits; consult the docs for parameter names and response details. Sign up for 1,000 free screenshots a month with no card.
FAQ
Does “Capture full size screenshot” include every product in a Shopify collection?
No. It captures the rendered page. Products on later pagination pages are separate, and infinite-scroll themes may need to load more cards before capture.
Do all Shopify stores lazy-load product images the same way?
No. Shopify documents lazy images in a collection example, but storefront themes and their loading behavior vary.
Can I capture a collection if I only need its first page?
Yes. Load the images and cards you want on that page, capture it, and inspect the saved image to confirm coverage.
What if my Chrome shortcuts differ?
Open DevTools and use its command menu search for “screenshot.” The exact command and shortcut details can vary by version.
Sources
- Shopify theme collection template guidance — collection grids, pagination, and lazy-loaded product images.
- Shopify pagination guidance — pagination depth, page-size recommendation, and infinite-scroll example.
- Chrome Help Community — reported DevTools full-size screenshot command; browser-version details may differ.


