If you are subscribed to the Framer & Customers plan, you can optionally load the connect page into an iframe. To make this work, your SimulArt account must first be installed on a subdomain matching your Shopify store.
Step 1. Contact us to initiate the custom subdomain installation procedure. The installation, maintenance, and SSL certificate required to secure the URLs are included in your plan.
Step 2. Make sure your account is properly connected to Shopify.
Step 3. Add the following code inside the <head></head> tags of the page where you will be loading the iframe. This code will make the height of the iframe adapt to the content. Make sure to replace ACCOUNT_URL by your custom subdomain.
<script src="https://ACCOUNT_URL/ext/iframeResizer/iframeResizer.min.js" type="text/javascript"></script>
<script language="javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
</script> Step 4. Add this code where you want the connect page to load. Do not forget to replace ACCOUNT_URL by your custom subdomain here as well.
<style>iframe{width:100%}</style>
<iframe id="simulart" scrolling="no" style="border: none; min-height: calc(100vh);" onload="iFrameResize({autoResize:true,checkOrigin:false})"></iframe>
<script>document.getElementById("simulart").src = "https://ACCOUNT_URL/connect_page?parentWidth=" + myWidth + "&parentHeight=" + myHeight;</script>You can optionally customize the page appearance of the page by adding your own CSS under Menu -> Settings -> Customer Pages CSS Styling.
This CSS code example will hide the top navigation and company name and address in the footer:
#topNav {
display: none;
}
#companyFooter {
display: none;
}
#addressFooter {
display: none;
}The page loaded in the iframe will allow your customers to upload images and create designs with the components of your account. Once done, clicking the "Add to cart" button will create a new custom item in Shopify and redirect the customer to cart for checkout.
Important Notes!
All the items created are saved in a special "SimulArt Hidden Items" collection. Custom items created by users may contain personal images and are set to "hidden". Please make sure to keep customer items hidden in your Shopify setup. SimulArt products may appear in your Catalog (collections/all), removing the global "Catalog" option from your menu and adding only specific collections normally solves the issue.
When checking out with Shopify, order details are not saved in your framing studio but only in Shopify. If you want the orders to be saved in your framing studio, please consider sending customers directly to your studio instead of the connect page.
