When running a Shopify store, you might sometimes need to display content from external websites directly on your pages. This could be a booking system, a product configurator, or any other tool that enhances your customers’ shopping experience. Embedding external pages into your Shopify store is straightforward using iframes, and this guide will walk you through the process step by step.
5 steps to embed external page to Shopify page
Finding the right content to embed
Before you begin the embedding process, you’ll need to identify exactly what external content you want to display on your Shopify page. This could be anything from a Google Calendar to a review platform or even another website you own. Once you’ve decided on the content, make note of the exact URL of the page you wish to embed, as you’ll need this for the iframe code.
Accessing your Shopify page editor
The next step involves accessing the page where you want to embed the external content. To do this, log into your Shopify admin dashboard and navigate to the Online Store section. From there, click on Pages and select the specific page where you want the embedded content to appear. If you need to create a new page for this purpose, you can do so by clicking the “Add page” button.
Adding the iframe code
Once you’re in the page editor, you’ll need to switch to HTML view to add the iframe code. Look for the “Show HTML” button in your rich text editor – it’s usually represented by a symbol. Clicking this will switch the editor from visual mode to HTML mode, allowing you to add custom code.
Now you can insert the iframe code that will embed your external page. The basic code structure looks like this:
<iframe src="https://www.example.com" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>Remember to replace “https://www.example.com” with the actual URL of the external page you want to embed. You can also adjust the width and height values to suit your page layout. The width of “100%” means the iframe will span the full width of its container, whilst the height of “500px” can be increased or decreased depending on how much of the external content you want to display without scrolling.
Customising the appearance
You might want to adjust how the embedded content appears on your page. The “frameborder” attribute set to “0” removes the border around the iframe, giving it a more seamless look. The “allowfullscreen” attribute enables the embedded content to be viewed in full-screen mode if that option is available.
If you want to add more styling, you can include additional attributes or wrap the iframe in a div with specific CSS classes. This can help the embedded content blend better with your store’s design.
Saving and testing your changes
After adding the iframe code, click the “Save” button to apply the changes to your page. It’s important to then view your page on the live site to ensure the embedded content appears correctly. Test it on different devices to make sure it’s responsive and displays properly on both desktop and mobile screens.
Conclusion
Embedding external pages into your Shopify store using iframes is a simple yet effective way to enhance your website’s functionality. By following these steps, you can seamlessly integrate useful tools and content from other websites directly into your store pages, providing a more comprehensive experience for your customers. Just remember to ensure that any content you embed is relevant to your audience and adds genuine value to your store.
