How to Add the SwiftXR Custom Block to the Media Image Section on Shopify

This guide will show you how to embed your SwiftXR 3D/AR/VR viewer directly into your product’s Media Image section 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 Product Information Section

1. In the Product Information or Media section, click the 3 dots.

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.