How to set Simple on Desktop and Wrap on Mobile

[tuanphan]

To set Simple on Desktop

and Wrap layout on Mobile.

#1**.** First, edit Product > Choose Simple layout

#2. Next, click on Gear icon on Store Page

#3**.** Click Advanced > Page Header Code Injection

#4**.** Paste this code to right box

<script>
function changeLayoutOnMobile() {
  if (window.innerWidth <= 768) {
    const productElement = document.querySelector('[data-product-detail-layout="simple"]');
    if (productElement) {
      productElement.setAttribute('data-product-detail-layout', 'wrap');
    }
  }
}

document.addEventListener('DOMContentLoaded', changeLayoutOnMobile);
window.addEventListener('resize', changeLayoutOnMobile);
</script>

[user28381]

Hi, I’m trying to set the simple layout on desktop and wrap on mobile, but I’m a bit lost. do I need to add some custom code for this? I’m not sure exactly where or how to implement it. could someone explain it step by step?

[tuanphan]

@user28381 I added extra steps before adding code, you can check again