How can I resolve the issue of images not loading when changing pages or searching for results on Webflow, specifically with regards to a pagination setup using Finsweet? This problem only occurs on the production site, as the staging site works without any issues.

Images not loading on the production site when using Finsweet’s pagination typically point to issues with CMS image loading, misconfiguration in custom scripts, or domain-specific resource paths.

1. Check Image Asset Paths and Hosting

• Compare Image URLs between staging and production. Inspect the image src attributes in both environments.
• Ensure all images are hosted on Webflow’s CDN and not referencing per-domain relative paths such as /images/filename.jpg which might differ between environments.

2. Confirm CMS Image Binding

• Go to your Collection Page or List and ensure images are bound correctly with CMS fields.
• Ensure images are set to display dynamically from a CMS image field, not statically inserted.

3. Validate Finsweet Attributes (Attributes.js)

• Double-check that you’re using Finsweet’s CMS Library correctly.
• Pagination, filtering, and sorting features require these two things on each page:
• fs-cmsload attribute for pagination container
• Proper structure following Finsweet’s documentation

4. Check for Webflow’s Page Protection Settings

• If your site is password-protected or uses page-level access control on production, Webflow might block media assets during async pagination loads.
• Remove page protection for testing and check if the issue resolves.

5. Confirm jQuery and Script Availability

• Open the browser console on your production domain.
• Look for errors like “jQuery is not defined” or 404 errors for any scripts like cmsload.js.
• Webflow sometimes serves jQuery only on the first-load or via lazy loading. Ensure your <script> that loads Finsweet library is placed after jQuery has loaded.

6. Use Absolute Domain Paths If Needed

• In some setups, Finsweet’s pagination with cmsload may attempt to reload HTML from current page URL. If the image paths or other assets are not absolute, production loading may fail due to CORS issues.
• Convert image paths inside CMS to fully qualified URL paths (e.g., https://cdn.prod.website-files.com/...) instead of relative ones.

7. Publish All Domains

• When using the Webflow default staging ([project].webflow.io) and a custom production domain, you must publish to both domains every time.
• Go to Project Settings → Publish and make sure both checkboxes are selected.

8. Clear and Rebuild Site Cache

• Sometimes Webflow’s build system doesn’t fully update scripts or CMS items on the production site.
• Try making a minor edit to your Webflow site (like repositioning an element), re-publish to production, and clear your browser + CDN cache.

Summary

The issue arises from differences in how assets or JS functions load between staging and production. Focus on verifying CMS-bound image loading, correct Finsweet pagination structure, domain-specific script and image path handling, and making sure both domains are fully published.