Skip to main content
Version: 1.0.0

Last Update: 16/01/2026

App Blocks (Components)

ARShades integrates with Shopify OS 2.0 themes using App Blocks. These are modular components that you can drag and drop directly into your product templates via the Shopify Theme Editor.

Available Blocks​

1. VTO Button (Virtual Try-On)​

This is the primary component for launching the virtual try-on experience.

Customisation Options​

  • VTO Configuration:

    • VTO Layout: Choose between interface versions (v1, v2, v3).
    • Single SKU Mode: If active (default), opens the selected variant directly.

  • Button Appearance:

    • Text: Customise the label (e.g., "Virtual Try-On").
    • Icon: Show/hide icon, upload custom icon, adjust size (16px-48px).
    • Colours: Define background, hover, and text colours.
    • Dimensions: Width (100%, Auto, 50%), Custom padding, Border radius (0-30px), Font size (12-24px).

  • Modal Configuration:

    • Dimensions: Desktop and mobile width/height (50-100%).
    • Style: Modal border radius, Overlay opacity (0-100%), Background colour.
    • Loading Text: Message shown whilst opening (e.g., "Loading...").

2. 3D Viewer Button​

Opens an interactive 3D viewer of the product in a modal.

Customisation Options​

Similar to the VTO button, it offers comprehensive options to match your theme:

  • Button: Text (e.g., "View in 3D"), Customisable icon (default 3D cube), Colours (Default: Dark Blue #1a1a2e), Dimensions, and Borders.
  • 3D Modal: Full control over dimensions, border radius, background opacity, and loading text ("Loading 3D...").

How to Add Blocks​

  1. Open the Shopify Theme Editor (you can do this from the plugin's "Customise Theme" tab).
  2. Navigate to the Product Template (usually Default Product).
  3. In the sidebar, click + Add Block within the "Product Information" section.
  4. Scroll down to Apps and select ARShades VTO Button or ARShades 3D Viewer Button.
  5. Drag the block to your desired position.
  6. Click on the added block to open the settings panel on the right and configure the options described above.
  7. Save your changes.

App Block Settings

Note: These blocks will only appear on products that are successfully synchronised and have the correct ARShades metafields.