Adding your Store

To add the custom Vrio app to your store, please follow the below instructions:

1. Add your store to your partner account. Don't have a partner account? Create a free Partner account here. Note - you may not use the same email to create a partner store as your Shopify store.

2. Select Add Store and Request access to the shop domain you want to install the app on. Include the myshopify.com portion ( not the store domain if its different ). Example custom-hats-for-sale.myshopify.com

   

3. Go to the Partner Dashboard under Apps and create a new App.

   

4. Click on Create App Manually

   

5. Name the App. This can be named anything that you wish. Example : Custom App Hats For Sale

   

6. Configure the App URLs by clicking on Configuration under the Build section

   

   1. Under APP URL put https://{YOUR VRIO INSTANCE URL}/shopify_app_main/custom/{YOUR SHOPIFY STORE NAME}(change "YOUR VRIO INSTANCE URL" with your own instance name)
      for example in the case of custom-hats-for-sale.myshopify.com we will use this if its connecting to our demo account. https://demo.vrio.app/shopify_app_main/custom/custom-hats-for-sale(change "demo" with your own instance name and change "custom-hats-for-sale" with your shopify store name)

   2. Under Allowed redirection URL(s), we will insert like this
      https://{YOUR VRIO INSTANCE URL}/shopify_app_main/custom/{YOUR SHOPIFY STORE NAME}
https://{YOUR VRIO INSTANCE URL}/shopify_app_main/custom/{YOUR SHOPIFY STORE NAME}/auth_callback
      for example in the case of http://custom-hats-for-sale.myshopify.com we will use this if its connecting to our demo account.
      https://demo.vrio.app/shopify_app_main/custom/custom-hats-for-sale
      https://demo.vrio.app/shopify_app_main/custom/custom-hats-for-sale/auth_callback

   3. Next under App Proxy, click the Set Up button

      1. Subpath Prefix, select "a"

      2. Subpath you will use " _sub_ "

      3. Proxy URL you will use: https://_{YOUR VRIO INSTANCE URL}_/shopify_app_main/custom/_{YOUR SHOPIFY STORE NAME}_/app_proxy
         for example in the case of http://custom-hats-for-sale.myshopify.com we will use this if its connecting to our demo account.
         https://demo.sublytics.com/shopify_app_main/custom/custom-hats-for-sale/app_proxy
         Leave all other fields as default and click Save and Release at the top

         

   4. Leave all other fields as default

   5. Click Save and Release at the top

      

7. Next click on Distributionon the side tab

8. Select Custom Distribution and then click Select.

   

9. On the next screen you will enter your store name, keep Allow Multistore install unchecked, then click Generate Link. For example we will use: custom-hats-for-sale.myshopify.com

10. Navigate to the API Access section in the App. Leave this page open to copy the API access tokens for step

    

11. Now you will go to your Vrio instance and navigate to https://{vrio_instance_url}/shopify_shop . Here is where you will add the new shop.

12. Click Add Shopify Shop in the top right.

    

13. Then on the popup, you will need to enter the following information

    1. Shopify Store URL enter the store URL.. example : custom-hats-for-sale.myshopify.com

    2. Shopify App Client ID enter the Client ID from step 10

    3. Shopify App Client secret enter the Client Secret from step 10

    4. Click Submit.

       

14. In the Shopify app click on Distribution. Click the Copy button and paste the URL into a browser. Follow the steps to install the app.

    1. It may ask you to choose the store to add the app to, then it will redirect you to the store and from there click Install App.

    2. Once this is complete. Leave this page open and go back to your Vrio instance.

       

15. Link your Vrio Billing Connection to your Shopify Store. There are two options here:

    1. Single Shopify Store:
       1. Navigate to Connections within Vrio (settings-> View All connections)
       2. Select the Vrio Billing Connection and under Default Linked Connection, choose your Shopify connection
    2. Multiple Shopify Stores and you do not want to link the customers together?
       1. Add a new Vrio Billing Connection for the Shopify App
          1. This step is needed if you have multiple shopify stores in your Vrio instance and do not want purchases from multiple stores to link to the same customer if the customer places an order with the same email across multiple stores.
          2. In this instance I will create a new Vrio connection and call it Custom Hats Vrio Connection. Then you will choose the Shopify connection that was created after the app install. In this case it was custom-hats-for-sale. Then check the Push to Origin Store and hit submit.
          3. If you do not meet the above criteria, skip this step and just

16. Navigate back to the app page from step 14 and refresh the page. Now you will see options for the app. Check on the Use Hosted Checkout and the app will start to take over the checkout. Select other options if needed, learn more here.

🚧

Shopify to Fulfill Shipments

If you are using Shopify to fulfill shipments, check the Use Shopify as fulfillment connection in order to collect the tracking numbers.

17. Lastly, you will need to configure your campaign associated with the new Shopify store, including your merchants/payment router, shipping, etc. Follow the checklist here.

👍

Key Components to verify

1. Within Vrio: Shopify Store is linked to your Vrio Billing Connection
2. Within Vrio: Default Campaign for Shopify store is created and linked to the Shopify Connection
3. Within Shopify: Use Hosted Checkout is checked within the Custom App

Shopify Custom App

Once the Vrio Custom App has been installed to your store, you can go adjust the necessary settings within Shopify.

Under Apps, you will see the Custom App installed.

The settings within the Custom App are defined as below:

Vrio Configuration

Once the Vrio Campaign has been created, you will need to go in and configure the campaign based on your preferred settings.

Utilizing the Vrio Setup Checklist is the best way to review all the options at your disposal.

Customizing the Vrio Checkout

1. Navigate to your Campaign that is linked to the Shopify Store

2. Branding

   1. On the Branding Tab, select the Colors, Fonts and Images to be used on the checkout

      

3. Next, navigate to the Checkout tab within the campaign. Here you will be able to add certain customization elements to the Vrio provided checkout

4. Input Field	Desciption
   GENERAL SETTINGS
   Company Name	This will be shown as the copyright holder in the footer of the application. If left blank, there will be no copyright section on the checkout
   Page Title	The title shows on the window tab of the checkout. If left blank, it will display "Secure Checkout"
   Checkout Confirmation Location	Select a destination to send the user after a completed order. Leave empty to use the standard Vrio thank you page. Merge Tags available for URL: {order_id}, {cart_token}
   Checkout Type	3 different template options: *One Page:** All customer data collection is on a single page *Two Page:** 1st page: Customer email, phone and Shipping address is on the first page, then on the 2nd page they will choose Shipping Method (if applicable), submit the payment information, add a different billing address (if applicable) and display any Terms and Conditions *Three Page: 1st page: Customer email, phone and Shipping address is on the first page, then on the2nd pagethey will choose Shipping Method (if applicable),3rd page:** submit the payment information, add a different billing address (if applicable) and display any Terms and Conditions
   Google Tag Manager	Add your Google Tag Manager container ID to associate with this checkout.
   OTHER CONFIGURATION
   Phone Required	When Checked, phone number input will be required to checkout If left unchecked, phone number will be optional
   TERMS
   Required Terms	If applicable, terms that will display that will be required to
   Auto Check Required Terms	When checked, the Required Terms will be already checked during the checkout. When left unchecked, the customer will have to check the box for the required terms to complete checkout.
   Require Terms Checkbox for	This allows you to set which Offers require the Terms to be checked. This can be none, all, recurring offers only or you can select specific offers. This is what will determine when the terms will display and be required for checkout.
   Non-Required Terms	If applicable, terms that will display, but not be a requirement to complete checkout
   Opt In Text	This will display under the customer email input section, allowing them to opt in / out of marketing (as an example)
   Terms URL	URL to redirect to for the Terms and Conditions. This will display at the footer of the checkout
   Privacy URL	URL to redirect to for the privacy details. This will display at the footer of the checkout
   Contact URL	URL to redirect to for the contact details. This will display at the footer of the checkout