Hi,
I am currently hosting a Verge3D app (iframe) that I made on my Shopify website. The app is being hosted on AWS. Currently the way it works is that the app doesnt load untill the user scrolls down to it, which is not ideal because the wait time is between 5-10 seconds and no one will wait that long. So I am trying to find a solution where the app starts to load as soon as the webpage starts so that by the time the user scrolls down to the app it would be fully loaded and ready for use. I tried a few from ChatGPT such as setting loading=”eager” and a few others but none worked. Any solutions would be appreciated.
Below is my current code to display the app:
<!DOCTYPE html>
<html>
<head>
<title>Shopify Website with Iframe</title>
<style>
.iframe-container {
display: flex;
justify-content: center;
align-items: center;
}
.threedviewer {
border-radius: 20px;
overflow: hidden;
width: 550px;
height: 350px;
}
/* Mobile view */
@media (max-width: 768px) {
.iframe-container {
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
}
/* PC view – customize width and height here */
@media (min-width: 769px) {
.threedviewer {
width: 620px; /* Adjust as needed */
height: 500px; /* Adjust as needed */
}
}
</style>
</head>
<body>
<iframe class=”threedviewer” src=”<!–Verge3D App is placed here–>” frameborder=”0″></iframe>
</body>
</html>
.
