#100 051

<div class="shop-column-toggle">
  <span>products/row</span>
  <span class="toggle-1">01</span>
  <span class="toggle-2">02</span>
</div>
<style>
div.shop-column-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #000;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
}
div.shop-column-toggle span {
    font-size: 18px;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
}
div.shop-column-toggle>span:first-child {
    width: 100%;
    color: #000;
}
div.shop-column-toggle>span:nth-child(n+2) {
    width: calc(50% - 2px);
    background-color: #000;
    border: 1px solid #fff;
  cursor: pointer;
}
  body.toggle-1 .list-grid {
    grid-template-columns: repeat(1,1fr) !important;
}
body.toggle-2 .list-grid {
    grid-template-columns: repeat(2,1fr) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle1 = document.querySelector('.toggle-1');
  const toggle2 = document.querySelector('.toggle-2');

  toggle1.addEventListener('click', function() {
    document.body.classList.add('toggle-1');
    document.body.classList.remove('toggle-2');
  });

  toggle2.addEventListener('click', function() {
    document.body.classList.add('toggle-2');
    document.body.classList.remove('toggle-1');
  });
});
</script>