Need an e-commerce platform supported by DecoNetwork’s Business Hub from your existing website? Plug in a simple iframe on your current website and you’ll have a full e-commerce platform in no time. We will encourage you to actually move your entire website for economical and maintenance reasons. We are not big fans of iframes in general (such a SEO waste) but if embedding your DecoNetwork store into an existing website is what you’re looking to accomplish, here is a guide to get it done.
What is an iframe?
The iframe is used to embed content from website A into website B by embedding HTML inside another HTML document. This allows the end-user to interact with content from website A directly from within website B.
Step 1 of 5
Most likely you want to display the Online Designer but other pages might make sense too. You need to know the URL’s to use and how to optimize for iframe use. Below is a list of pages and the example embed URL. You can access and customize each page by navigating to Website > Website Pages and selecting a page.
- Home : https://×××××.secure-decoration.com/?_ifm=true
- Create : https://×××××.secure-decoration.com/create?_ifm=true
- Products : https://×××××.secure-decoration.com/shop?_ifm=true
- Designs : https://×××××.secure-decoration.com/designs?_ifm=true
- Designer : https://×××××.secure-decoration.com/designer/customize?_ifm=true
- Request a Quote : https://×××××.secure-decoration.com/request_quote?_ifm=true
Step 2 of 5
You may have noticed that links from above are using secure protocol (https). Use the secure domain on your URL for the iframes. This is necessary so your iframe will work any external page including ones running over SSL.
Make sure you use your own sites’ secure domain name instead of the example above. If you don’t know your domain name or if you wish to change your domain name, navigating to Website > Edit Domain Name and click Edit.
NOTE: Not including this parameter leads to issues with checkout, like cart showing empty when attempting to checkout.
Step 3 of 5
From Website > Customize Template HTML, remove all unnecessary elements. Since you are using an iframe, you don’t want the DecoNetwork menu or footer to display as this can create confusion. Your custom HTML code should look like this after the code reduction:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!--SID: R.I--> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title><page-title></page-title> </title> <meta-data></meta-data> <theme-css></theme-css> </head> <body > <shopping-cart></shopping-cart> <application></application> </body> </html>
From Website > Customize Template CSS, you can also make adjustments to stylize your pages if needed. This would be optional but a great way to blend the look and feel from website A and B.
Step 4 of 5
From Website > Website Page Options, disable the Breadcrumbs option. This hides the breadcrumb navigation and helps prevent confusion once a page is embed inside your current website.
From Website > Online Designer Settings, enable Allow Online Designer option. This displays the Online Designer so that your customers can customize products online.
Step 5 of 5
Last but not least, create and add your iframe HTML into your existing website. You can copy and paste the iframe HTML listed below into your own websites HTML. Remember to update the URL to that of the page you wish to embed. Cheers!
<iframe src="YOUR-URL-HERE" width="870px" height="700px"></iframe>