To add a virtual try-on experience to your shop, simply install the PICTOFiT Shopping app by clicking “Add app” and follow the instructions on our PICTOFiT Shopping Shopify marketplace page.
Link: https://apps.shopify.com/pictofit-1

After the installation you should find PICTOFiT under your installed Apps. Click on it and select the plan that fits your need best.

Adding the Dressing Room to the navigation

How to add the Dressing Room to the page navigation

Navigate to the Shopify admin space and click PICTOFIT Virtual Try-On in the Apps section. Click Show Installation Steps. You should see a link starting with your shop URL. Copy this link and close the overlay.

Next, navigate to Online Store then Navigation. Choose the Main Menu and click Add Menu Item. Under Name enter “Dressing Room” and paste the previously copied URL under Link. Click Add and then Save.

That’s it. Go to your shop preview, refresh the page, and you should be able to find the Dressing Room.

Adding the Dressing Room to your product page

How to add the Dressing Room button to the Product Page

Next, you will need an “Add to dressing room” button on your product detail page. This let’s your shoppers add garments to the dressing room and virtually try them on.

Navigate to Themes within the Online Store in your store’s admin page and click Customize. Click on the dropdown menu at the top of the page and select Product then Default Product. In the menu on the left, click Add Block and select Add to dressing room. An Add to dressing room button will appear on the product detail page preview, and a block will appear in the menu.

You have the option to customize the button. To move the button on the product page, drag the Add to dressing room block. On the right side of the page, you can further adapt the button color, size, etc.

This process may need to be repeated for each product type.

Adding the Hanger Icon to your collection (optional)

You can add our hanger icon (see picture below) on the product cards, so your customers can add products to the dressing room from the collection list with one click.

The process is similar to the previous step. Navigate to Themes within the Online Store in your store’s admin page and click Customize. Click on the dropdown menu at the top of the page and select Collection then Default Collection. In the menu on the left, click Add Block and select Add to dressing room grid. You have now added the hanger icon.

You have the option to customize the button. On the right side of the page, you can further adapt the button color, size, etc.

This process may need to be repeated for each collection type.

Settings

To change the general settings of the app, navigate to the PICTOFiT Virtual Try-On within the app section and select Settings on the top right corner.

You will find a list of settings for the app:

Compute Server URL: Please don’t change this!

Dressing Room: This allows you to change the dressing room mode. The mode will depend on the Assets you have requested. For example, a 3D dressing room will require 3D assets.

Enable custom avatars: When switched on, your shoppers will be able to create personalized mannequins.

Hide check fit button: Your shoppers can receive size recommendations in the dressing room by selecting “Do not hide”. Contact sales@reactivereality.com for more information.

Size Option: Provide the option name you are using for sizes.

General Styling: Customize the style of your dressing room.

Language: Choose your own wording/language for the different elements that are part of the PICTOFiT Virtual Try-On.