Collection page > View zoom button

Technical Q&A

Topic summary

A developer is implementing view toggle buttons for collection pages to switch between different grid layouts on mobile and desktop devices.

Implementation Details:

  • Added buttons to control grid column display (appears to offer 2, 4, and 6 column options for desktop)
  • JavaScript code targets the product grid’s class attributes ({{ section.settings.columns_mobile }} and {{ section.settings.columns_desktop }})
  • Uses localStorage to persist user’s grid preference across sessions
  • Functions update grid classes dynamically based on button clicks

Current Issue:

  • The view toggle buttons work correctly on desktop
  • Mobile view buttons are not functioning - only showing default product layout
  • The code includes functions for both updateGridClassesDesktop() and updateGridClassesMobile(), plus initialization logic

Technical Context:
The implementation involves manipulating CSS grid classes and storing preferences locally. The posted code snippet appears partially corrupted or reversed in the mobile section, which may be related to the malfunction.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

rishav12_0-1721052616089.png
rishav12_0-1721052616089.png290×144 2.11 KB

I have added above button for different view in mobile and desktop

    I am trying to change the {{ section.settings.columns_mobile }} and {{ section.settings.columns_desktop }} using below js code-

    document.addEventListener(‘DOMContentLoaded’, function() {
    const button1 = document.getElementById(‘button-1’);
    const button2 = document.getElementById(‘button-2’);
    const button3 = document.getElementById(‘button-3’);
    const productGrid = document.getElementById(‘product-grid’);

    function getInitialGridStateDesktop() {
    const savedGridColumnsDesktop = localStorage.getItem(‘gridColumnsDesktop’);
    return savedGridColumnsDesktop || ‘2’;
    }

    function getInitialGridStateMobile() {
    const savedGridColumnsMobile = localStorage.getItem(‘gridColumnsMobile’);
    return savedGridColumnsMobile || ‘1’;
    }

    function updateGridClassesDesktop(columns) {
    productGrid.className = productGrid.className.replace(/grid–\d±col-desktop/g, grid--${columns}-col-desktop);
    localStorage.setItem(‘gridColumnsDesktop’, columns);
    }

    function updateGridClassesMobile(column) {
    productGrid.className = productGrid.className.replace(/grid–\d±col-tablet-down/g, grid--${column}-col-tablet-down);
    localStorage.setItem(‘gridColumnsMobile’, column);
    }

    function setActiveButton(activeButton) {
    [button1, button2, button3].forEach(button => button.classList.remove(‘view-option-selector-button–selected’));
    activeButton.classList.add(‘view-option-selector-button–selected’);
    }

    function initializeGrid() {
    const initialGridStateDesktop = getInitialGridStateDesktop();
    updateGridClassesDesktop(initialGridStateDesktop);

    const initialGridStateMobile = getInitialGridStateMobile();
    updateGridClassesMobile(initialGridStateMobile);

    if (initialGridStateDesktop === ‘2’) {
    setActiveButton(button1);
    } else if (initialGridStateDesktop === ‘4’) {
    setActiveButton(button2);
    } else if (initialGridStateDesktop === ‘6’) {
    setActiveButton(button3);
    }
    }

    initializeGrid();

    button1.addEventListener(‘click’, function() {
    updateGridClassesDesktop(‘2’);
    updateGridClassesMobile(‘2’);
    setActiveButton(button1);
    });

    button2.addEventListener(‘click’, function() {
    updateGridClassesDesktop(‘4’);
    updateGridClassesMobile(‘2’);
    setActiveButton(button2);
    });

    button3.addEventListener(‘click’, function() {
    updateGridClassesDesktop(‘6’);
    updateGridClassesMobile(‘3’);
    setActiveButton(button3);
    });
    });

    But, in mobile view button is not working and only its showing default product in a row