Return to previous page

XStore Theme – Product Card Layout Flash/Delay on Page Load

This topic has 4 replies, 2 voices, and was last updated 1 week, 2 days ago ago by Jack Richardson

pckeycallout

Participant

September 26, 2026 at 13:47

Hi 8Theme Team,

We’re seeing a display issue with the product cards (shop/category page) on our XStore-powered WooCommerce site. On page load, the product cards briefly render incorrectly/incompletely (see attached screenshot) before settling into their correct layout — there’s a noticeable millisecond-level delay before the cards display properly.

This looks like a layout shift/flash of unstyled content issue, possibly related to how the product card CSS/JS or images are loading and rendering in sequence.

Could you help us identify:

Whether this is a known rendering/layout issue with the product card template
Whether it’s related to how card assets (styles, images, lazy loading) are being loaded
Any fix, setting, or optimization we can apply to prevent this flash on page load

Screenshot attached showing the affected state. Happy to provide the page URL or a screen recording if that helps.

Thanks.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#476119 Copied

3 Answers

Jack Richardson

Support staff

September 26, 2026 at 15:11

Hello @pckeycallout,

We have tested the issue using both Safari and Chrome browsers, but we were unable to replicate it on our end. You can view the screenshot here: https://prnt.sc/NuU-HPz2Zrjx. Could you please check from another device or browser and share the results with us? Additionally, you may attach a video demonstrating the steps to reproduce the issue on our side.

Best regards,
Jack Richardson
The 8Theme’s Team

#476122 Copied

pckeycallout

Participant

October 1, 2026 at 10:56

Hello Jack,

Thanks for testing this on your side. I’ve attached a screen recording of the issue here: https://we.tl/t-eobsqeYAKJAeTF40

What the video shows: On page load, the product cards on the shop/category page briefly render in an incomplete or incorrect state (images and card content not yet in their final layout) before snapping into the correct layout. It happens within the first moment of loading, so it can be easy to miss on a fast connection or when the page is served from cache.

Steps to reproduce:

Open the shop/category page in a fresh incognito/private window (so nothing is cached).
Hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
Watch the product grid as the page loads. Throttling the connection to “Fast 3G” in Chrome DevTools (Network tab) makes it much more visible.

Why it may not reproduce on your demo: Your test setup likely has fewer plugins, lighter content, and no caching or optimization layer. On our site, the delay may be related to how the card CSS/JS and images load in sequence (for example, Elementor/XStore styles, lazy loading, or JS-driven grid/isotope layout initializing after first paint).

Could you please help us with the following:

Is this a known layout shift / FOUC issue with the XStore product card template?
Is there an XStore setting we should adjust (for example, lazy loading, “load CSS/JS asynchronously,” critical CSS, or the product grid/isotope initialization) to prevent the cards from rendering before their styles and layout are ready?
Are there any recommended CSS or optimization tweaks, such as reserving image dimensions or aspect ratio on the card so it doesn’t shift on load?

I’m happy to provide the page URL, and temporary WP admin access if it helps you investigate on the live site.

Thanks.

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#476218 Copied

Jack Richardson

Support staff

October 1, 2026 at 13:10

Hello @pckeycallout,

We have reviewed the video and tested the issue on our end. The loading time for your products is influenced by the resources loaded on the page, including large images that need optimization and it is not an issue in our theme or some one-click setting to enable as it is caused by the web-site content that is not from our demo. We recommend using tools such as TinyPNG or other available options to optimize these images. For instance, some images are approximately 1MB each and take about 3-4 seconds to load (https://prnt.sc/AwG3xKbipIhN). You can test it on your browser in Network tab to check the source for optimization.

Since your shop page uses infinite scroll for loading products, the images take some time to load. With AJAX loading, they are not lazy-loaded; instead, all newly loaded images are loaded at once. We suggest reducing the number of products displayed per page (Customizer -> WooCommerce -> Products display) and testing other pagination types on your shop page (such as “load more” or AJAX pagination).

Additionally, we have a dedicated article on website optimization that you may find helpful. You can review it and configure your settings as suggested (https://www.8theme.com/documentation/xstore/troubleshooting/the-ultimate-2025-guide-to-boosting-wordpress-speed-with-xstore-theme/).

Best Regards,
Jack Richardson
The 8Theme’s Team

#476223 Copied
Viewing 4 results - 1 through 4 (of 4 total)