Figured it out. Just need to change small bit of code on two files:
/storefront/view/default/style.css -> around line 2525 change:
.list {display: none}
to:
.grid {display:none}
/storefront/view/default/template/pages/product/category.tpl -> around line 35 change:
<button class="btn" id="list">
to:
<button class="btn btn-orange" id="list">
AND
<button class="btn btn-orange" id="grid">
to:
<button class="btn" id="grid">
The JS just toggles the element's display style for both the grid and list divs. Then CSS was used to set ".list" initially to "display:none". So you'll just change this from .list to .grid
Same thing for the btn-orange class. JS just toggles this, there's no :active class or anything, just a toggle. So instead of .grid initially having the btn-orange class and .list not having it, you just switch it around so .list has it initially and .grid does not. Then toggle will continue to work like normal.
Hope this helps!
/storefront/view/default/style.css -> around line 2525 change:
.list {display: none}
to:
.grid {display:none}
/storefront/view/default/template/pages/product/category.tpl -> around line 35 change:
<button class="btn" id="list">
to:
<button class="btn btn-orange" id="list">
AND
<button class="btn btn-orange" id="grid">
to:
<button class="btn" id="grid">
The JS just toggles the element's display style for both the grid and list divs. Then CSS was used to set ".list" initially to "display:none". So you'll just change this from .list to .grid
Same thing for the btn-orange class. JS just toggles this, there's no :active class or anything, just a toggle. So instead of .grid initially having the btn-orange class and .list not having it, you just switch it around so .list has it initially and .grid does not. Then toggle will continue to work like normal.
Hope this helps!