Use Wix Stores to manage Foxy products

Step 1: Wix Website Editor setup

Disable Quick View

Follow the steps here: https://support.wix.com/en/article/wix-stores-customizing-the-quick-view-in-the-product-gallery#enable-or-disable-quick-view

Product Page settings

1. 1

   From your Wix Website Editor, go to Product Page

2. 2

   Click anywhere within the product section, and two options should show above your cursor
   

3. 3

   Click the Settings button

4. 4

   From the pop-up product page settings window, click Settings from the side bar

5. 5

   Scroll to the "Add to Cart" section

6. 6

   For the "When button is clicked" setting, choose Stay in Product Page

7. 7

   Scroll to the "Buy Now" section

8. 8

   For the "Show button" setting, toggle it off
   

Step 2: Add Foxy code snippets

There are two code snippets need to be added to your Wix website. 

Foxy loader.js file

1. 1

   From your Foxy Admin, go to Settings > Website & Products

2. 2

   Copy the Foxy loader.js code snippet (other code snippets on the page are not needed for this tutorial)

3. 3

   From your Wix Dashboard, go to Settings > Custom code (under Development & integrations)

4. 4

   Click the Add Custom Code button at the top right 

5. 5

   Paste the Foxy loader.js code snippet in the text box

6. 6

   Enter a name for the code snippet (ex: Foxy loader.js)

7. 7

   For the "Add Code to Pages" setting, select All pages and Load code once

8. 8

   For the "Place Code in" setting, select Body - End

9. 9

   Click Apply

Foxy + Wix integration code

1. 1

   From the same Custom Code settings page, click the Add Custom Code button again to add the second code snippet

2. 2

   Copy the code snippet below and paste in the text box

   Copy Copied

   <!-- FOXY + WIX -->
   <script src="https://foxy-integrations.netlify.app/foxy-wix.js"></script>

3. 3

   For the "Add Code to Pages" setting, select All pages and Load code on each new page

4. 4

   For the "Place Code in" setting, select Body - End

5. 5

   Click Apply

After finishing the steps above, you should be able to add products to Foxy cart by clicking the "Add to Cart" button on the product page. 

Optional: Pass a product's weight to Foxy

If you need to pass a product's weight for calculating shipping, follow the steps below:

1. 1

   From your Wix Dashboard, go to Catalog > Store Products > Products

2. 2

   Choose a product

3. 3

   Under "Product info" section, click the Add an Info Section button

4. 4

   In the "Info section title" field, enter Weight: followed by the product's weight (ex: Weight: 1kg or Weight: 0.5lb). The weight unit follows the "Default weight unit" setting in your Foxy categories setting

5. 5

   Click OK and Save the product settings

Optional: Update product inventory with Make

Import Make scenario blueprint

1. 1

   Open this link to the Make blueprint file: Make blueprint. On the file page, right click and choose Save As... from the menu to save the file on your computer

2. 2

   Login Make and create a new scenario

3. 3

   From the controls at the bottom, click the More button and choose Import Blueprint

   

4. 4

   Choose the downloaded blueprint file and click Save

Update the Foxy New Transaction module

1. 1

   Select the Foxy New Transaction module 

2. 2

   Click the Create a webhook button

3. 3

   Give this webhook a name (ex: Foxy Transaction Webhook) and Save

4. 4

   Click the Copy address to clipboard button

5. 5

   From your Foxy admin, go to Settings > Integrations

6. 6

   Click the Add webhook button under the Webhooks section

7. 7

   Enter a name for this webhook (ex: Make)

8. 8

   Select Transaction for the Resource setting

9. 9

   Generate a Encrpytion key

10. 10

    For the Endpoint field, paste the URL copied from Make

11. 11

    Click Create

12. 12

    We now need to feed a transaction to the webhook so it can be read by Make. Complete a transaction (test or live) on your store. This will send the data over to your Make webhook. (If you ever need to do that again in the future, you can go to the “transactions” section of the Foxy administration and expand a transaction. Under the “Webhooks” section of the transaction, check the box for your Make webhook and click the “Refeed selected webhooks” button.)

13. 13

    Go back to Make, and you should see that Webhooks module has updated to show that it’s received the data.

Update the Search Wix Products module

1. 1

   Go to Wix Developer Center and login with your Wix credentials

2. 2

   From the navigation bar at the top, toggle Build Apps and go to My Apps

3. 3

   Click the Create New App button

4. 4

   From the left sidebar, go to the Permissions page, then click the Add Permissions button

5. 5

   Select Filter by category and choose Wix Stores from the dropdown

6. 6

   Check the scope of Manage Products and Save

7. 7

   From the left sidebar, go to the OAuth page

8. 8

   In the App URL field, enter https://www.make.com/en/integrations/wix

9. 9

   In the Redirect URL field, enter https://www.integromat.com/oauth/cb/wix

10. 10

    Click Save

11. 11

    Copy the App ID and App Secret Key

12. 12

    Go back to Make, select the Search Wix Products module and click Create a connection

13. 13

    Paste the App ID and App Secret from Step 11

14. 14

    Click Save

15. 15

    From the pop-up window, select your Wix site and Agree & Add the app

16. 16

    Click OK to close the module

Update the Custom JS module

1. 1

   Select the Custom JS module

2. 2

   In the X-RapidAPI-Key field, use the test API key or follow this guide to get your own API key

3. 3

   Click Save then OK

Update the Update Wix Product Inventory module

1. 1

   Select the Update Wix Product Inventory module

2. 2

   Choose your Wix connection from the dropdown

3. 3

   Click OK

Now you can complete a transaction from you Wix website. After completing the checkout, inventory in Wix should be updated.