How to Add the SwiftXR Custom Block to any section on your Product Media Page

This guide will show you how to embed your SwiftXR 3D/AR/VR viewer to any section of your Media on your Shopify store

Step 1 — Open Your Theme Editor

1. In your Shopify admin, go to Online Store → Themes.

2. Click Customize on the theme you want to edit.

Step 2 — Open Your Product Page Template

1. In the top bar of the theme editor, use the dropdown to select a Product Page.

2. Choose the Default product template (or your preferred product template)

Step 3 — Click and Edit the your code on the Product Page

1. On the Product page, click the 3 dots beside Live

2. Choose Edit Code

Step 4 — Paste the SwiftXR Embed Code

Paste the following code into your Custom Liquid block:

// Some code
{% liquid 
  assign swiftxr_product_url = product.metafields.swiftxr.product_url_api
%}

{% if swiftxr_product_url %}

  <div style="width: 100%; height: 450px; margin: 0;"> 
    <iframe title="3D Product" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; camera; midi; encrypted-media; gyroscope; accelerometer; magnetometer; xr-spatial-tracking; microphone;" execution-while-out-of-viewport execution-while-not-rendered web-share width="100%" height="100%" src="{{ swiftxr_product_url }}"> 
    </iframe>
  </div>

{% endif %}

Step 5 — Save and Test

1. Click Save in the top right.

2. You should now see the 3D viewer in the media section.