1. Nextech AR Help Center
  2. ARitize eCommerce Platform Integration

User Guideline for WooCommerce

This document will show you how to use the ARitize 3D application on Woo Commerce system.

1. Install the Plugin

To use the system, you need to install the plugin first. There are two ways to install the 3D plugin on WordPress

1.1 Install Plugin by Zip file

Step 1: Log in the store successfully

Step 2: On the left menu, select Plugins

mceclip0.png

Step 3: Pre-condition: 3D Plugin is available on WordPress plugin store. Select "Add New" >> "Upload Plugin">> "Choose File".

mceclip1.png

Step 4: Click Install Now button to install the application. After installing successfully, the application will be displayed on the plugin list.

mceclip2.png

Notice: Please ensure that your WooCommerce store is already well configured. Otherwise, ARitize 3D plugin can not be activated.

1.2 Install plugin by downloading directly from WordPress Plugin store

Step 1. Go to Dashboard of your WordPress ecommerce website. Click to Plugins menu

mceclip0.png

Step 2: Click button "Add New"mceclip0.png

Step 3: Input keyword "aritize 3d" in textbox search

mceclip1.png

Step 4: Click "Install Now" button

mceclip2.png

Step 5: Click "Activate" button.

Notice: Please ensure that your WooCommerce store is already well configured. Otherwise, ARitize 3D plugin cannot be activated.

mceclip3.png

The Aritize 3D plugin has been installed successfully.

mceclip4.png

2. Activate and Configure Plugin

Step 1: Click Activate on WooCommerce section to activate the WooCommerce system, and the plugin WooCommerce will be displayed on the menu list.

mceclip3.png

mceclip4.png

Step 2: Click Activate on ARitize 3D section to activate the ARitize 3D system, and the plugin ARitize 3D will be displayed on the menu list.

mceclip5.png

mceclip6.png

Step 3: After activating the ARitize 3D app successfully, go to Settings.

mceclip7.png

Step 4: In the ARitize 3D setting, open General tab.

mceclip8.png

mceclip9.png

  • Select Default embed button position by clicking on the drop down list. This selection will be applied as the default embed button position on the product detail pages.

mceclip10.png

Step 5: After selecting all information, click on Update button to save all information.

mceclip11.png

Step 6: Open REST API tab

  • Click Generated button to generate token. This step only needs to be completed once.

mceclip12.png

  • If you click on generate button again, the system will display a warning pop up .

mceclip13.png

3. Create a new 3D model

Verify created product on WooCommerce

In case you dont know how to create a product on WooCommerce, please refer to the link for detailed steps:

https://woocommerce.com/document/managing-products/

Sign up

Create a new account with Nextech AR

Step 1: If user dont have account, please click on Sign Up button.

mceclip14.png

Step 2: Input all valid information then click on Create Account to sign up.

mceclip15.png

Step 3: After register successfully, the system will redirect to dashboard of current user.

mceclip16.png

Step 4: Click on Lets get started.

mceclip17.png

4. Log in

Open ARitize 3D application successfully, log into the system.

Step 1: On log in screen of ARitize 3D application, input valid email address and correct password then click on Log In button.

mceclip18.png

  • Click on Remember Me to save current information.

mceclip19.png

Step 2: After logging in successfully, it will direct user to the dashboard screen as below.

mceclip20.png

  • If users dont remember password, click on Forgot Password button.

mceclip21.png

  • Input email address then click on Send button.

mceclip22.png

The password will be sent to the users email. Then the user can use the email to login.

5. Select plan

After registering successfully, click on Lets get started. The system will redirect to Select plan section. In this section, users will select the plan that they want to purchase.

Step 1: Enter your information then click on Continue.

mceclip23.png

Step 2: Select the plan that you want to purchase, and then click on the Confirm Plan button on the confirmation pop up to redirect to step 3.

MicrosoftTeams-image__4_.jpeg

Step 3: Select the billing period that you want, and then click on the Confirm Plan button on the confirmation pop up to redirect to step 4.

MicrosoftTeams-image__4__copy.jpeg

6. Enter Payment

To continue using the application, users will need to enter their payment.

Step 1: After selecting a plan successfully, input your information into payment page.

mceclip28.png

mceclip29.png

Step 2: Click on Confirm and Pay button after completing.

mceclip30.png

Step 3: The system will display a success message after paying successfully.

mceclip31.png

Step 4: If user want to upgrade plan, click on Upgrade Plan option on dashboard.

mceclip32.png

Step 5: Open Select Plan screen, select plan that you want to upgrade.

MicrosoftTeams-image__4_.jpeg

Step 6: Select Billing Period.

MicrosoftTeams-image__4__copy.jpeg

Step 7: Input billing information then click on Confirm and Pay.

mceclip35.png

mceclip36.png

Step 8: A message will display after paying successfully.

mceclip37.png

  • To view billing history, click on Account Settings.

mceclip38.png

Open Billing History tab then click on View Invoice.

mceclip39.png

The user can download the invoice and see payment details.

7. Access Dashboard

After paying successfully, go to the dashboard. On the dashboard screen, select the option that you want to do:

mceclip40.png

  • Click on Create a new model if you want to create model.
  • Click on View My Models to see all the models of current user.
  • Click on View Analytics to view analytics gathered on the usage of the 3D model controls.
  • Click on Explore Tutorials to view helpful how-to videos?.
  • Click on Contact Support to contact sales and support?.

Youll also have access to the number of SKUs remaining that you can create 3D models for based on your subscription displayed on the top right of the screen.

mceclip41.png

To access account information, click on the Setting icon on the top right.

mceclip42.png

  • Select Account Settings to edit account.
  • Select Upgrade Plan to update plan.
  • And select Log Out if you want to log out the application.

8. Create a new model

Step 1: Click on Create a new model button on the dashboard.

mceclip44.png

Step 2: Search the product that you want to use by inputting the information into the search field.

mceclip45.png

Or click Exit to close the page or Back to open the previous page.

  • SKU number of product is required in order for the Continue button to be active.

mceclip46.png

mceclip47.png

Notice: If you want to have an image to refer to on the 3D app, you must have an image in the product gallery on WooCommerce.

mceclip48.png

mceclip49.png

Step 3: Input search keyword or SKU number then click Continue.

mceclip50.png

Step 4: Input the size of model then click Continue.

mceclip51.png

Step 5: Upload images of model.

mceclip52.png

  • Click the Delete icon to delete any uploaded image

Step 6: Click on Review your model button.

mceclip53.png

Step 7: Check the information of the created model then click Create my model to continue.

mceclip54.png

Step 8: A Success! pop up will appear, click Got it to confirm.

mceclip55.png

Step 9: Check information of created model displayed on My Models.

mceclip56.png

9. Review/Publish models

In this section, users can review their created model (information of models, comments, etc.) before approving.

Step 1: Click on any model on the model list.

mceclip57.png

Step 2: On Product Details page, check information of the product.

mceclip58.png

Step 3: Click on Reference Photos tab to view and rotate the 3D model.

mceclip59.png

mceclip60.png

Step 4: Open Comment tab to insert a comment and then click submit.

mceclip61.png

After the model is approved by admin, that model can be published.

Step 5: Click on Publish Model.

mceclip62.png

Step 6: Click on Publish Model on confirmation pop up.

mceclip63.png

10. Generate embed buttons

This section will show user how to add embed buttons for a specific product

Step 1: After publishing the model successfully by clicking on Publish Model button on the confirmation pop up, the system will display the embed settings pop. The user will need to select the Embed Buttons tab.

  • Users select kind of buttons then click on Activate Selected Options.

mceclip64.png

  • Click on Update Model tab in case you want to update current model.
  • And click on QR code if you want to see a QR code of your current model.

Step 2: After selecting buttons, go to store and active ARitize 3D Button.

mceclip65.png

Step 3: If you want to use another position compared to default. After activating ARitize 3D Button, set up position of the buttons.

mceclip66.png

Step 4: After activating ARitize 3D Button and set up position of the buttons, click Update button.

mceclip67.png

Step 5: Check buttons displayed on the product page.

11. Customize CSS of embed buttons

Step 1: In the store, access Settings screen of ARitize 3D app in the left menu.

mceclip69.pngPicture1_1_.png

Step 2: Change the value of attribute on the code such as background-color, color, etc. that match with your needs.

mceclip70.png

Step 3: Click Update File button to update the value of the attribute.

mceclip71.png

  • Embed buttons CSS will be displayed correctly with the value is set in the Step 3.

Step 4: On View Product Page screen, embed buttons CSS must be displayed correctly with the value is set in Step 3.

KFC.png

mceclip72.png

Step 5: In the Settings screen of the ARitize 3D app, in the Customize CSS tab, click on Revert to default button to return default settings of the embed button.

KFC2.png

mceclip73.png

  • In case of deleting all the code and clicking "Update File" button, the system will display a warning pop up.

mceclip74.png

12. Unsubscribe

This is to unsubscribe from ARitize 3D.

Step 1: Open Subscription on Account Settings section of the ARitize 3D page, click Unsubscribe.

mceclip75.png

Step 2: After clicking Unsubscribe, the user must fill a reason for unsubscribing and click Unsubscribe button on the pop-up confirmation.

mceclip76.png

Step 3: After successfully unsubscribing, the status button will change to an inactive status.

mceclip77.png

13. Tips

The Code Snippet plugin blocks the process of WooCommerce embedding buttons on a product page.

It needs to be deactivated.

blobid0.png