To embed a virtual tour in Shopify, you host the tour on a dedicated tour platform, copy its iframe embed code, and paste it into your store. For a page, product or blog post, you paste it through the HTML button in the editor. For a homepage or any designed layout, you paste it into a Custom Liquid section or block in the theme editor. The whole job takes about ten minutes. Making it look right on a phone and getting Google to understand the page takes a little more care, and that is what this guide covers.
TL;DR
- Host the tour outside Shopify and embed it with an iframe. Shopify's Files section is not built for interactive 360° tours.
- Use the HTML editor (the
</>button) for pages, products and blog posts. Use a Custom Liquid section or block for the homepage and custom layouts. - Wrap the iframe in a responsive container so it keeps its aspect ratio on mobile.
- Add real text, a descriptive title and alt text around the tour, and make sure your store is not password-protected, so search engines can index the page.
- With Simple Virtual Tour, you can start on a free plan, then choose a cloud subscription or a self-hosted license.
Table of Contents
- Why you should host the tour outside Shopify
- What you need before you start
- Method 1: Embed the tour on a page, product or blog post
- Method 2: Add the tour with a Custom Liquid section or block
- Keep the tour responsive on mobile
- Ideas for where a tour earns its place in a store
- Make the page findable: SEO for a Shopify page with a tour
- Our perspective: why we recommend keeping the tour on your own terms
- Build and embed your tour with Simple Virtual Tour
- Troubleshooting common embed problems
- A short launch checklist
- FAQ
- Sources
Why you should host the tour outside Shopify
A virtual tour is not a single file. It is a set of panoramas, hotspots, transitions, sometimes video and audio, all driven by a viewer. Shopify is built to run a store, not to serve that kind of viewer, so the usual approach is to host the tour on a specialized platform and show it inside your store through an embed.
There is also a practical limit. Shopify's Files section documentation sets caps on uploaded video, and large 360° video files tend to run into them. Shopify's own help page on the rich text editor takes the same approach for media widgets: you host the content on an outside service, which generates an embed code, and you paste that code into your admin.
Hosting externally has three benefits:
- Speed. Heavy panorama files load from the tour platform, not from your store's theme and assets.
- Easy updates. When you change a hotspot or swap a photo in the tour, the embedded version updates without you touching Shopify.
- Reuse. The same tour can appear on a product page, a landing page and a blog post, all from one source.
What you need before you start
- A finished tour with a public or shareable link and an embed code (an
<iframe ...></iframe>snippet). - Admin access to your Shopify store.
- A decision about where the tour will live: a product page, a dedicated "Tour" page, the homepage, or a blog post.
If you have not built the tour yet, our guide to embedding a virtual tour on a website explains how embed codes work in general and what to check on the tour side first.
Method 1: Embed the tour on a page, product or blog post
This is the fastest route and works for any content that uses Shopify's rich text editor. It suits a dedicated tour page, a product description or a blog article.
- In your Shopify admin, open the page, product or blog post where the tour should appear. (Shopify explains the editor on its creating and editing pages help page.)
- In the content field, place your cursor where you want the tour to show.
- Click the HTML button, shown as
</>, to switch to the code view. - Paste the iframe code from your tour platform.
- Switch back to the visual view, then save.
- Open the live page on a desktop and a phone and test that you can move around the tour.
A typical embed looks like this:
<iframe src="https://your-tour-link" width="100%" height="500" style="border:0;" allowfullscreen loading="lazy"></iframe>
The allowfullscreen attribute matters for a virtual tour. It lets visitors expand the viewer to the whole screen, which is where 360° content works best. The loading="lazy" attribute tells the browser to load the tour only when the visitor scrolls near it, which helps page speed when the tour sits below the fold.
The catch with the rich text editor
The rich text editor is quick, but a fixed height in the iframe can look cramped or stretched on small screens. If you see that, move to Method 2, or wrap the iframe as shown in the responsive section below.
Method 2: Add the tour with a Custom Liquid section or block
For your homepage, a landing page, or any spot where the tour is part of the design, use the theme editor. Shopify themes are built from sections and blocks, and modern themes include a Custom Liquid option that accepts your own HTML.
- In your admin, go to Online Store > Themes and click Customize on your live theme.
- Use the page selector at the top to open the template you want, such as Home page, a product template or a custom page template.
- Click Add section, then choose Custom Liquid. In some themes, you can instead add a Custom Liquid block inside an existing section.
- Paste your embed code, wrapped in a responsive container (see the next section).
- Drag the section to the position you want and save.
- Check the desktop and mobile previews at the top of the editor before you publish.
If your theme does not offer a Custom Liquid section, you can add the snippet by editing the theme files. Shopify describes that route on its editing your theme with code page. Duplicate your theme first so you can roll back if something breaks.
Which method should you pick?
| Where the tour goes | Best method | Why |
|---|---|---|
| Dedicated tour page | Rich text editor, or a custom page template with Custom Liquid | Simple, and easy to add explanatory text around it |
| Product description | Rich text editor | Keeps the tour with the product it explains |
| Blog post | Rich text editor | Works well for case studies and walkthroughs |
| Homepage hero or feature area | Custom Liquid section | Full control over size and placement |
| Reusable layout across several pages | Custom Liquid block in a template | Edit once, apply to the template |
Keep the tour responsive on mobile
Most visitors to a Shopify store arrive on a phone, so this step matters more than it looks. A fixed pixel height that looks fine on a laptop can leave a thin strip or a huge gap on mobile. Instead, wrap the iframe in a container that holds an aspect ratio and let the iframe fill it:
<div style="position:relative; width:100%; aspect-ratio:16/9; max-width:1200px; margin:0 auto;">
<iframe src="https://your-tour-link" style="position:absolute; inset:0; width:100%; height:100%; border:0;" allowfullscreen loading="lazy" title="Virtual tour of our showroom"></iframe>
</div>
A few notes from practice:
- 16:9 suits most tours on desktop. On phones, some store owners prefer a taller ratio such as 4:3. Change the
aspect-ratiovalue and compare in the mobile preview. - Some themes override iframe styles. If your tour collapses to a short strip or sticks to one side, a theme rule may be forcing a size. Right-click the page, view the source, and search for
iframe {to find the rule. This write-up on iframes collapsing in Shopify describes the same symptom and a Custom Liquid fix. - Always set a
titleon the iframe. It helps screen reader users know what the frame contains. - Test on a real phone, not only the browser's resized window. Touch gestures such as dragging to look around behave differently.
Ideas for where a tour earns its place in a store
A tour is not decoration. It works when it answers a question a shopper would otherwise have to email you about.
- Showroom or physical store page. Let visitors walk the space before they visit. Our guide to virtual tour software for retail and showrooms covers products and e-commerce features in more depth.
- High-consideration products. Furniture, vehicles, equipment or anything bought with the surroundings in mind benefits from a view that photos cannot give.
- Venue and rental listings. If your Shopify store sells bookings, tickets or services at a location, a tour shows the place. Our venue tour embedding guide walks through that scenario.
- Property and hospitality. The same embed logic applies to real estate and hotels. See the embedded property tour guide.
Make the page findable: SEO for a Shopify page with a tour
An iframe is content from another address. Search engines can see that a frame exists, but they learn what the page is about mostly from the text around it. A page that holds only a tour and nothing else gives Google very little context.
Do this on every page that carries a tour:
- Write a descriptive title and meta description that name the place or product, not just "Virtual tour".
- Add real text near the tour. Two or three paragraphs describing what visitors will see, key features, location, and a clear next step.
- Add alt text to the images on the page, including any preview image.
- Give the iframe a descriptive
titleattribute. - Link to the page from your navigation, your collections or your blog so it is not an orphan.
- Make sure your store is public. Search engines cannot crawl a password-protected storefront. Shopify generates a
sitemap.xmlfor every store with pages, products, collections and blog posts, as explained on its sitemap help page, so the page will be included once the store is open.
To see what search engines actually render, Shopify's SEO FAQ points to checking how your pages are rendered. Google Search Console's URL Inspection tool is the usual way to do that: confirm that the tour container and your text both appear in the rendered page.
If you want a deeper walk-through of ranking tour pages, we cover it in our virtual tour SEO guide, and our piece on Google Business Profile publishing for tours covers local visibility. For store-wide fundamentals, the Shopify SEO academy from BabyLoveGrowth is a useful reference. And if a page is live but still not showing in search, this practical diagnosis of why a business site does not appear in Google lists the checks to run first.
Our perspective: why we recommend keeping the tour on your own terms
We built Simple Virtual Tour because we saw how many businesses wanted a tour on their site and ended up locked into a tool they could not shape. For a Shopify merchant, the embed is the easy part. The harder question is what sits behind it.
Here is how we think about it. A tour is an asset you will update for years: new products, a new layout, a seasonal setup. So we offer two ways to run it. You can use our cloud plans, where we host everything and you simply paste the embed code. Or you can buy the software once and host it yourself, with full source code ownership, so you control your data and avoid ongoing fees. Both give you unlimited tours.
For most Shopify merchants, we suggest starting in the cloud: it is the quickest path from photos to a live embed. If you run an agency, build tours for clients or want to resell tours as a service, the self-hosted route with the SaaS plugin is built for that.
One more thing we tell everyone: do not let the tour be the whole page. A tour with a clear heading, honest description and a link to buy or book converts better than a viewer on an empty page, and it is far easier for search engines to understand.
— Andrea
Build and embed your tour with Simple Virtual Tour
Simple Virtual Tour lets you create unlimited interactive tours from 360° photos and video, add hotspots, brand the viewer, and copy an embed code that drops straight into Shopify using either method above. You can try it on the Free Forever plan first. Paid cloud plans are priced per month:
| Plan | Price |
|---|---|
| XS (Starter) | €2.99 per month |
| S (Creator) | €5.99 per month |
| M (Professional) | €9.99 per month |
| L (Business) | €19.99 per month |
| XL (Enterprise) | €49.99 per month |
Prefer to own the software? The self-hosted CORE license is a one-off $79, with optional plugins: SaaS multi-user management at $269, Google Street View publishing at $59, and AI tools at $39, all one-off. See the plans and pricing or start with a free account. You can also read about the self-hosted deployment option.
Troubleshooting common embed problems
The tour does not appear at all. Check that you pasted the code in the HTML view, not the visual view, where it would show as text. Also confirm the tour link is public and that the full <iframe> tag, including the closing tag, was pasted.
The tour appears as a thin strip. A theme style is probably overriding the iframe height. Use the responsive wrapper above, or check the page source for an iframe rule in your theme CSS.
It looks fine on desktop but wrong on mobile. Switch from a fixed height to the aspect-ratio container, then adjust the ratio.
The tour shows to you but not to visitors. Your store may still be password-protected, or the tour's sharing settings may be private. Open the page in a private browser window while logged out to test.
Fullscreen does not work. Make sure allowfullscreen is in the iframe tag.
The page loads slowly. Add loading="lazy", and avoid placing several tours on the same page. One tour per page, with links between pages, performs better than a stack of viewers.
A short launch checklist
- Tour built, tested and shared publicly.
- Embed code pasted with the responsive wrapper and a descriptive
title. - Page title, meta description, alt text and body text written.
- Previewed on desktop and a real phone.
- Store public, page linked from your navigation or a collection.
- Page inspected in Search Console after publishing.
FAQ
Can I embed a virtual tour on any Shopify plan?
The rich text editor and theme editor are part of the standard Shopify admin, so pasting an iframe is not tied to a special add-on. Availability of the Custom Liquid section depends on your theme, so check that your theme offers it or that you can edit the theme code. Shopify's help pages describe both routes.
Why not upload my 360° video straight to Shopify?
Shopify's Files section has limits on video size and length, and a tour needs a viewer, hotspots and navigation that a plain video file does not provide. Hosting the tour on a dedicated platform and embedding it keeps your store light and lets you edit the tour without touching your theme.
Will an embedded tour hurt my store's speed?
It can if the iframe loads at the top of a heavy page. Use lazy loading, keep one tour per page, and place it below the main product information when possible. Because the tour assets load from the tour host, they do not add to your Shopify file storage.
Will Google index the tour itself?
Google mainly understands the page from the text, images and structure around the tour, so treat the iframe as a feature of the page, not the whole page. Write a descriptive title, add body text, and confirm the render with Search Console's URL Inspection tool.
Can I put the tour on the homepage?
Yes. Open the theme editor, add a Custom Liquid section to the home template, paste the responsive embed code and place it where you want it. Preview on mobile before you save.
Sources
- Shopify Help Center: Using the rich text editor for content
- Shopify Help Center: Creating and editing pages
- Shopify Help Center: Sections and blocks
- Shopify Help Center: Editing your theme with code
- Shopify Help Center: Uploading and managing files
- Shopify Help Center: Finding and submitting your sitemap
- Shopify Help Center: Frequently asked questions about SEO
- Shopify iframe not showing properly