VBlankSupport

Add a VBlank viewing to your Shopify site

Updated 3 min read

On this page

Quick answer

Open a Shopify page, switch its content editor to HTML and insert the VBlank iframe snippet where the viewing should appear. Save and check the storefront page.

You’ll need
Your iframe snippet and Shopify editor access

Add an interactive viewing to your Shopify page so visitors can explore your space alongside the rest of your content.

Before you begin

Have your post-scan email open. Check the direct link first, then copy the iframe HTML snippet for the visualisation you want to show. Keep your asset ID as a reference.

Website requirements

You need a Shopify online store and permission to edit its pages. The steps below add the viewing to a regular page, such as a venue or showroom page.

Add the viewer to a Shopify page

  1. From Shopify admin, open Online Store → Pages. Choose a page or create one.
  2. In the Content toolbar, select the Show HTML (<>) button.
  3. Insert the complete iframe snippet at the position for the viewing. Keep the page’s existing content around it.
  4. Save the page. Check its visibility setting when you are ready to make it available to visitors.
  5. Open the storefront page and test the viewer on desktop and mobile. Add a navigation link to the page if visitors need a way to find it.

Check the viewing and layout

On the live page, try moving around the scene. Check the page on a phone and make sure the viewer’s controls are visible. If you change the width or height, check both layouts again.

Provider tip

Your theme sets the width of page content. If the viewing is too narrow, choose a wider page layout if your theme offers one, or ask your designer to adjust this page’s template. Keep enough height for the viewer controls.

For more detail, see sizing your embed or troubleshooting a viewing.

To offer a separate way to open the viewing, add a text link or button labelled something like Explore our space in 3D (or whatever you fancy) and paste the direct link from your post-scan email into its web address field. This also works when your website cannot accept iframe HTML.

Provider reference: Shopify: creating and editing pages. Editor labels and plan availability may change.

Add a VBlank viewing to your websiteHow to customise your embedTroubleshooting your VBlank embed

Still need help?

For help, email contact@vblank.co.uk or call +44 (0)7831 086 427 (WhatsApp).

Have your asset ID and website address ready. Tell us which provider you use and where you’re getting stuck.