Goal: add an optional “View all” button on a Shopify Focal collection page to show every product on one page, while keeping the default 24 products per page.
Context: Example collection has 57 items (currently 3 pages). Request for a simple code snippet to trigger the change from paginated to “all items on one page.”
Attempted approach: Implemented a JavaScript toggle between two sections in main-collection.liquid:
Paginated section: id=“original-section”.
All-items section: id=“alternate-section”.
Button: id=“replace-section-button” calls a script that hides original-section and shows alternate-section.
Issue: After clicking into a product and using the browser’s Back button, the collection page reverts to the default paginated view, not the previously selected “View all.” Similarly, if coming from the paginated view, it should return to the correct paginated page.
Ask: Guidance on persisting the selected view across navigation (e.g., via URL parameters or stored state) and a working code sample. Status: unresolved; seeking a reliable method to maintain state on back navigation.
I am trying to find a solution to add a button on collection page to show all collection items in one page.
Currently we have the setting to show 24 products in one page and we want to keep that as default. However we would love to have a button that when clicked would change the settings so that all the collection products are shown as one page.
As example, we have collection flowers which has 57 items all together and now this collection has 3 pages. With the view all button all 57 items will be shown in one page.
Hello, I am very familiar with the code but for some reason this doesn’t seem to work Would you have a code piece I could just add to the collection page inside a button to trigger the setting change?
I tested the goven code but it did not work for the purpose. I have executed the show all button by adding id=”original-section” to the that wraps the pagination in original main-collection.liquid then added a snippet with same code but replaced the pagination by and added a new section to the main-collection with id=”alternate-section”. Then added following script at the end of main-collection:
So when customer clicks button with id=”replace-section-button” it will shift from pagination to show all. However I now have faiced the problem that when customer opens any product from these sections and return to the collection with previous page browser button, it will show the original paginated collection.
would you have any idea what to add to the script to make it so that if customer clicks the product from the original collection it would return them to the right paginated page and vice versa if they have clicked the view all button and went to product from there and then return it would show the show all type of page?