How to screenshot e-commerce websites

E-commerce websites are hard to screenshot consistently.

They often include product carousels, lazy-loaded images, sticky promotion bars, cookie banners, chat widgets, A/B tests, geolocation prompts, personalized content, and animations that continue after the first page load event. Full-page screenshots add another layer of complexity because the browser has to scroll through the page, trigger lazy-loaded sections, and stitch the result without duplicating sticky elements or missing late-rendered content.

ScreenshotOne gives you options to make these captures more predictable. Use them for previews, visual QA, archiving, presentation workflows, and design inspiration. Always make sure you have the right to capture the target pages and comply with applicable website terms and local laws.

Shops.Gallery is an example of this kind of visual workflow: it uses ScreenshotOne to render consistent previews of publicly accessible storefronts for curated design inspiration.

Above-the-fold screenshots

For storefront previews, start with the first viewport. It is usually faster than a full-page screenshot and captures the most important visual state: navigation, hero area, primary promotion, and first product presentation.

const searchParams = new URLSearchParams({
    access_key: process.env.SCREENSHOTONE_ACCESS_KEY,
    url: "https://example.com",
    format: "png",
    response_type: "json",
    viewport_width: "1440",
    viewport_height: "1024",
    delay: "3",
    reduced_motion: "true",
    block_ads: "true",
    block_trackers: "true",
    block_cookie_banners: "true",
    block_chats: "true",
    block_banners_by_heuristics: "true",
});

const requestUrl = `https://api.screenshotone.com/take?${searchParams.toString()}`;

The important options are:

• delay=3 gives the storefront a few seconds to finish initial rendering.
• reduced_motion=true asks the page to minimize animations where supported.
• block_cookie_banners=true, block_chats=true, and block_banners_by_heuristics=true reduce common overlays that can cover the storefront.
• block_ads=true and block_trackers=true reduce third-party noise and improve repeatability.
• viewport_width=1440 and viewport_height=1024 produce a stable desktop preview size.

Full-page screenshots

Use full-page screenshots when you need to review the whole storefront: category sections, product grids, social proof, footer content, or layout consistency below the first viewport.

For e-commerce pages, prefer the by_sections full-page algorithm. It scrolls through the page and captures sections, which can work better for lazy-loaded storefront content.

const searchParams = new URLSearchParams({
    access_key: process.env.SCREENSHOTONE_ACCESS_KEY,
    url: "https://example.com",
    format: "png",
    response_type: "json",
    viewport_width: "1440",
    viewport_height: "1024",
    delay: "3",
    reduced_motion: "true",
    block_ads: "true",
    block_trackers: "true",
    block_cookie_banners: "true",
    block_chats: "true",
    block_banners_by_heuristics: "true",
    full_page: "true",
    full_page_algorithm: "by_sections",
});

const requestUrl = `https://api.screenshotone.com/take?${searchParams.toString()}`;

Full-page captures take longer and have more corner cases. Some pages load content only after a very specific scroll behavior. Some sticky elements are designed for interactive browsing and can appear in every captured section. Some animations, videos, or product galleries can change between sections.

If the result is inconsistent, tune the capture gradually:

• Increase delay for slower storefronts.
• Keep reduced_motion=true enabled for pages with heavy animation.
• Try a different viewport_height to change section size.
• Use the full-page scrolling options from the full-page screenshots guide when lazy-loaded content needs more time.

Support

If you run into rendering inconsistencies or storefront-specific issues, reach out to support@screenshotone.com with the target URL and details about the expected result. ScreenshotOne continuously improves e-commerce rendering compatibility based on real-world feedback.