Topic summary
Mobile collection pages were showing one product per row; the goal was two products per row (two columns). An initial template change from col-12 to col-6 worked briefly, then reverted when more products loaded, indicating a JavaScript override during infinite scroll.
After theme access was provided (email corrected), the fix was implemented and confirmed working on the Deals collection URL. Key changes:
- In snippets/header-js.liquid, switch script reference from theme.min.js to theme.js to apply editable JS.
- In assets/theme.js (line ~4027), update the class assignment from “js-col col-sm-6 col-12” to “js-col col-sm-6 col-6” so mobile retains two columns.
Technical note: col-12/col-6 are grid classes controlling column width (12 = full width; 6 = half width). The issue was caused by JavaScript reassigning classes after initial load.
Outcome: Resolved. The collection grid now displays two products per row on mobile, and the user confirmed the fix. Screenshots were shared but the resolution hinged on JavaScript and template updates.