[agomezmeade]

Hello

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

Thanks

[candidexmedia]

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.

[Author]

Posts