Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Persona Default View List?

  • #8585
    Avatar photo[anonymous]

    Hello

    Anyone know how to make the List View default instead of Grid View on the Persona theme?

    Thanks

    #8600
    Avatar photo[anonymous]

    Here’s what I could come up with:

    First, if you haven’t already, create an override theme folder so that your changes are kept even if you upgrade the theme.

    Next, you’ll want to override index.hbs and script.min.js.

    Open the override script.min.js, and change the following code from this:

    let gridBtn = layoutButtons[0];
    let rowsBtn = layoutButtons[1];

    To this:

    let gridBtn = layoutButtons[1];
    let rowsBtn = layoutButtons[0];

    Then, in the override index.hbs, swap the switchers items buttons and is-active class.

    Before:

    <button class="switchers__item is-active">
       <svg  width="20" height="20" fill="currentColor" >
          <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#switcher-grid"/>
       </svg>
    </button>
    <button class="switchers__item">
       <svg  width="20" height="20" fill="currentColor" >
          <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#switcher-rows"/>
       </svg>
    </button>

    After:

    <button class="switchers__item is-active">
       <svg  width="20" height="20" fill="currentColor" >
          <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#switcher-rows"/>
       </svg>
    </button>
    <button class="switchers__item">
       <svg  width="20" height="20" fill="currentColor" >
          <use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#switcher-grid"/>
       </svg>
    </button>

    That’s it! Let me know if that works on your end.