The Return Magic portal is an iframe. To create the page, we use the Application Proxies from Shopify. Any content that you add above or below your portal, and anytime the length of the portal changes (when customers need to select products to return for example), it might create a new scroll within the iframe.
To limit this, you can edit your Shopify theme. Head to "Online Store" in your Shopify console. In the "Current Theme" section, there is an "Actions" drop-down button. Select "Edit Code":
Then, open up the theme.liquid template:
Inside of the first <head> tag, check if there is already a <style> tag. If not, add this snippet of code to the <head> tag:
<style> .app-returnmagic iframe {min-height: 125vh;} </style>
If there is already a <style> tag, just add this inside it:
.app-returnmagic iframe {min-height: 125vh;}
The vh unit stands for "relative to 1% of the height of the viewport" (a viewport is the browser window size). This allows for a more dynamic rendering, but you can also use pixels (px) to set a fixed height.
Also, you can edit the value (125vh) to what works best for the layout you want to accomplish!
Comments
0 comments
Please sign in to leave a comment.