Frequently Asked Questions

Here you can find solutions to the most common issues related to the ARShades Shopify Plugin.

General & Installation

The "Virtual Try-On" button does not appear on the product page.

This is the most common issue and usually has one of these causes:

1. Product not synced: Ensure the product has been successfully synchronised in the ARShades Dashboard and has a valid "Ready" status.
2. Missing Metafields: The plugin relies on Shopify Metafields. Check if the product variant has the arshades.catalogueVariantId populated.
3. Theme Compatibility: If you are using a legacy theme, you might need to use the Manual Integration instead of App Blocks.
4. Preview Mode: If you are viewing a draft theme, ensure the App Embed is enabled in that specific theme context.

I updated my Shopify theme and the plugin disappeared.

If you are using App Blocks (OS 2.0), the blocks are tied to the specific theme templates. When you switch or update a theme, you must re-add the App Blocks via the Theme Editor.

If you used Manual Integration, your code changes in .liquid files are overwritten during a theme update. You must re-apply the integration code.

Virtual Try-On (VTO) Experience

The VTO opens, but it shows the wrong glasses/colour.

This usually happens when the "Variant Change" event is not detected correctly.

• App Blocks: Ensure the block is placed inside the main Product Section.
• Manual Integration: Verify that your custom Javascript is listening to the correct event (e.g., variant:changed, variantChange) used by your specific theme to update the SKU when the user selects a different colour.

The 3D Viewer works, but the Virtual Try-On does not.

The 3D Viewer and VTO are separate modules.

• 3D Viewer requires the catalogueProductId.
• VTO requires the catalogueVariantId.

If only one works, it is likely that one of the two Metafields is missing or the asset is not correctly linked in the ARShades Dashboard.

The modal is cut off or not centered on mobile devices.

The ARShades modal is responsive by default. However, some theme CSS might conflict with the z-index or container width. You can adjust the mobile appearance by modifying the configuration object in window.ARShadesVTOConfig:

window.ARShadesVTOConfig = {
  // ... other settings
  modalWidthMobile: 100,
  modalHeightMobile: 100,
  modalRadiusMobile: 0
};

Licence & Configuration

I see a "Licence Error" or "Invalid Domain" message.

For security reasons, the ARShades plugin only works on domains authorised in your Licence.

1. Go to ARShades Studio > Settings.
2. Ensure your Shopify domain (both myshopify.com and the custom domain) is whitelisted.
3. Check that the shop.metafields.arshades.catalogueId matches your actual Catalogue ID.

Can I use the plugin on a development store?

Yes. However, the development store URL (e.g., dev-store.myshopify.com) must be added to your allowed domains list in the ARShades Studio dashboard.