Horizon Theme Mobile AR Bug

Technical Q&A
,
1

Hello,

I started a new shop on shopify using Horizon theme. I am using 3D models for Augmented Reality and a few days ago i found a problem.
The problem is that on mobile (iOS more exactly) i couldn’t find the Augmented Reality buton…, today i tried with Down and it works.
I did a little bit of troubleshooting and i found the issue, i think a dev forgot about this functionality.

in “snippets/product-media.liquid” in the following section we can only see this with a comment from the dev:

          <template>

            {% # Should I be using media_tag here instead like on Dawn? 🤔 %}

            {{ media | model_viewer_tag }}

          </template>

I tried deleting “data-shopify-xr-hidden” line. It shows the button, but after i click on the 3D model, it dissapears…

Any idea?

Thanks!

2

try using this code

<template>
{{ media | model_viewer_tag:
image_size: '2048x',
reveal: 'interaction',
toggleable: true,
data-model-id: media.id
}}
</template>

and also check if the ar button code is there are not


<button
  class="product__xr-button"
  type="button"
  aria-label="View in your space"
  data-shopify-xr
  data-shopify-model3d-id="{{ media.id }}"
  data-shopify-title="{{ product.title }}"
  data-shopify-xr-hidden
>
  View in your space
</button>
3

The question is whether your iOS recent enough.
Horizon family themes are much less tolerant to old browser versions than Dawn.

Try again on a device with the latest iOS.

There is a JS code which should load actual model viewer when you click the button. The idea is to not load content if it’s not requested to save bandwidth and make site faster, it’s not forgotten.

4

I’ve spent some time debugging the problem. I guess Shopify should’ve done this, but…

Update.

Yes, Horizon family does have a bug which prevents showing AR.

There are 2 possible fixes.
One is proper, but would require editing theme code, which will make future updates problematic. It is rather for theme devs.

Another fix is easy to apply and would not prevent your theme updates.

Simply create a “Custom liquid” block in the Product info section on a product page and paste this code:

<!-- tim fix for AR -->
{% assign models = closest.product.media | where: 'media_type', 'model' %}
{% if  models.size > 0 %}
  <script
    type="application/json"
    id="ProductModelJSON-{{ closest.product.id }}"
  >
    {{ models | json }}
  </script>
  <style>
    .product-media:has(.button-shopify-xr:not([data-shopify-xr-hidden])) :is(product-model,img) {
      height: calc(100% - 80px) !important;
    }
    .product-media {
      flex-direction: column;
    }
  </style>
{%- endif -%}

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
6

Unfotunately, none of the solutions provided worked…, but i found a solution:

Creating a custom button below the media gallery with the following code:

{% for media in product.media %}
{% if media.media_type == ‘model’ %}
{% for source in media.sources %}
{% if source.format == ‘usdz’ %}
{% assign usdz_url = source.url %}
{% endif %}
{% if source.format == ‘glb’ %}
{% assign glb_url = source.url %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}

{% if usdz_url != blank or glb_url != blank %}

{%- assign usdz_full = ‘https:’ | append: usdz_url -%}
{%- assign glb_full  = ‘https:’ | append: glb_url  -%}

<a rel="ar" id="ar-ios-link" href="{{ usdz_full }}" style="display:none;">
    <img src="{{ usdz_full }}" style="width:1px;height:1px;">
  </a>

<button
onclick=“launchAR()”
style="
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #000;
color: #fff;
border: none;
padding: 13px 22px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
width: 100%;
margin: 12px 0;
"



<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
  stroke="currentColor" stroke-width="1.8"
  stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
  <path d="M2 12l10 5 10-5"/>
</svg>
Vizualizează în camera ta

</button>

<p id="ar-unsupported" style="display:none; font-size:13px; color:#888; margin-top:8px; text-align:center;">
    AR este disponibil doar pe iOS (Safari) și Android.
  </p>

<script>
    function launchAR() {
      var ua = navigator.userAgent;
      if (/iPhone|iPad|iPod/i.test(ua)) {
        document.getElementById('ar-ios-link').click();
        return;
      }
      if (/android/i.test(ua)) {
        var glbUrl = "{{ glb_full }}";
        var sceneViewerUrl =
          'intent://arvr.google.com/scene-viewer/1.0' +
          '?file=' + encodeURIComponent(glbUrl) +
          '&mode=ar_preferred' +
          '#Intent;scheme=https;' +
          'package=com.google.android.googlequicksearchbox;' +
          'action=android.intent.action.VIEW;' +
          'S.browser_fallback_url=' + encodeURIComponent(glbUrl) +
          ';end;';
        window.location.href = sceneViewerUrl;
        return;
      }
      document.getElementById('ar-unsupported').style.display = 'block';
    }
  </script>

{% endif %}
7

Have you tried my solution above?

I tested it in my dev store on Horizon/Savor and it does not require editing theme code.
Just makes it work

8

Yes, but i tried it on iOS 26.3.1 and it didn’t work unfortunately. Thank you for your help!