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 you can embed into your current website and the example links. You can access and customize each page by navigating to Website > Website Pages and selecting a page.
- Create : https://iframe.secure-decoration.com/create?_ifm=true
- Products : https://iframe.secure-decoration.com/shop?_ifm=true
- Designs : https://iframe.secure-decoration.com/designs?_ifm=true
- Designer : https://iframe.secure-decoration.com/designer/customize?_ifm=true
- Request a Quote : https://iframe.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 helps avoid cookie issues during checkout in an IFrame, such as an empty cart during checkout.
Make sure you replace (iframe) from the URL with your own store domain name. 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.
When embedding a URL you need to pass the IFrame mode parameter in the URL (?_ifm=true). This uses a mode without cookies as some browsers like Safari wont allow cookies to save on pages embedded in a IFrame unless the domain has been visited by the user directly.
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>