MyCustomizer themes mobile experience is designed to be fullscreen. This is a choice we made from our experience gained by designing and implementing hundreds of customizers. Turning off fullscreen might impact the experience.



You can turn the fullscreen experience off on mobile by overriding our CSS with !important rules on the Shopify end.

We suggest writing this rule in the product.mczrmobile.liquid template file.

In your Shopify admin go to Online Store > Themes > Actions > Edit Code

Open the product.mczrmobile.liquid file in the templates folder.

If your template file already has a <style> tag try to find the #mczrLoader identifier

{% include 'mczr' %}
<div id="mczrLoader" style="width:100%;height:100%;position:fixed;top:0;left:0;z-index: 2147483647;">
</div>
<style>
html {
padding: 0;
margin: 0;
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
#mczrLoader{
text-align:center;
}
</style>

In this example you could modify #mczrLoader like this:

#mczrLoader{
text-align:center;
height:90vh !important;
}


If your file does not have <style> tag or #mczrLoader identifier simply add it

<style>
#mczrLoader{
height:90vh !important;
}
</style>

If you want to override our CSS, you can do so on the Shopify side. If you are not familiar with coding or do not have web developers, we highly recommend hiring a Shopify Expert such ash Carson, to help you with this.



* height: 90vh !important; means the customizer will take 90% of the view height of the device. The !important will make it so this value is always taken over any other one.

Did this answer your question?