Custom AR Activation for Shopify and levAR

For stores that want to provide a more custom AR activation experience, we provide the opportunity to design and implement your own activation. The process is simple, but it does require knowledge of both Shopify's liquid language and HTML/CSS.

All you need to do is copy a short snippet of JavaScript into your liquid product theme and then modify the button styling to match your site's look and feel.

**Important**

Because this is a custom dynamic button it will only show on your product page when a Shopify variant has AR and is activated (currently something levAR will do for you) it's important that you let us know if you want to implement this process before you start. Please follow the following 5 steps:

1. Let your Sales Representative know that you plan to add levAR's custom button to your site.
2. Please provide a test variant (product and or color/size) to levAR for testing
3. levAR will activate that product for the custom button
4. When you add the custom button code, you will be able to test the look and activation using that one Shopify variant.
5. Once everything is good, levAR will activate any other products that you want to be live with the custom button.

Installing the Custom Button:

To Start, log into your Shopify Store and click on the Online Stores sales channel and then select Themes.

Then the Theme Actions drop down and select Edit Code

Find your product-template.liquid section

NOTE: For the custom button to work, your template must be able to reference the product on the page and you must be on a /products uri for example:

https://ecommerce-demo.levar.io/collections/xtratuf/products/mens-6-in-ankle-deck-boot

Once you are in your product-template.liquid code, paste the following lines of code where you want your button to be located on your page.

<script>
var levar_onload_variant_id = {{ product.selected_or_first_available_variant.id | json }};
window.levar_onload_variant_id = levar_onload_variant_id;
</script>

{% if product.metafields.custom_btn['active'] %}
<button id="levar-custom-button" style="opacity: 0;">YOUR ACTIVATION TEXT</button>
{% endif %}

Direct to AR/QR

If you'd prefer your button to drive directly to AR (or the QR code on desktop), use the follosing script instead.

<script>
var levar_onload_variant_id = {{ product.selected_or_first_available_variant.id | json }};
window.levar_onload_variant_id = levar_onload_variant_id;
</script>

{% if product.metafields.direct_qr['active'] %}
<div style="display: flex; align-items: center;">
   <img style="width: 60px; margin-right: 10px;" src="https://levar-viewer-settings.s3.amazonaws.com/logos/3d_try_now.svg" />
    <button id="levar-direct-qr-button" class="btn">Try in My Space</button>
</div>
{% endif %}

As an example, we added a blue button right under the payment buttons and right above the product text in our e-commerce demo store. 

This is what our product-template.liquid code looks like with inline styling of the button:

We placed it directly after the payment buttons and used inline styling, however we recommend to reference the id from your own style sheet. 

Make sure you keep the id="levar-custom-button", if you change the ID the integration will not work.

If you have questions, or would like help, please reach out to success@levar.io

Schedule a Free Consultation