5 min read • Updated 3 months ago

Use Wix Stores to manage Foxy products

As soon as you make the following changes, they will be live, so you may want to duplicate your Wix site and test or have Foxy already configured.

Step 1: Wix Website Editor setup

1
From your Wix Website Editor, go to the Product Page
2
Click anywhere within the product section, and two options should show above your cursor
3
Click the Settings button to go to the product page settings
4
Click Settings from the side bar
5
Scroll to the "Add to Cart" section
6
For the "When button is clicked" setting, select the Stay in Product Page option
7
Scroll to the "Buy Now" section
8
For the "Show button" setting, toggle it off

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

1
From your Wix Dashboard, go to Settings > Custom Code (under Advanced)
2
Click the Add Custom Code button at the top right
3
From your Foxy Admin, go to Settings > Website & Products
4
Copy the Foxy loader.js code snippet (other code snippets on the page are not needed for this tutorial)
5
Go back to the Wix settings page, then paste the code from the previous step in the text box
6
For the "Add Code to Pages" setting, select All pages and Load code once
7
For the "Place Code in" setting, select Body - End
8
Click Apply

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

Copy the code snippet below and paste in the text box

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

3
For the "Add Code to Pages" setting, select All pages and Load code on each new page
4
For the "Place Code in" setting, select Body - End
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.

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
Login Make and create a new scenario
3
From the controls at the bottom, click the More button and choose Import Blueprint
4
Choose the downloaded blueprint file and click Save

1
Select the Foxy New Transaction module
2
Click the Create a webhook button
3
Give this webhook a name (ex: Foxy Transaction Webhook) and Save
4
Click the Copy address to clipboard button
5
From your Foxy admin, go to Settings > Integrations
6
Click the Add webhook button under the Webhooks section
7
Enter a name for this webhook (ex: Make)
8
Select Transaction for the Resource setting
9
Generate a Encrpytion key
10
For the Endpoint field, paste the URL copied from Make
11
Click Create
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
Go back to Make, and you should see that Webhooks module has updated to show that it’s received the data.

1
Go to Wix Developer Center and login with your Wix credentials
2
From the navigation bar at the top, toggle Build Apps and go to My Apps
3
Click the Create New App button
4
From the left sidebar, go to the Permissions page, then click the Add Permissions button
5
Select Filter by category and choose Wix Stores from the dropdown
6
Check the scope of Manage Products and Save
7
From the left sidebar, go to the OAuth page
8
In the App URL field, enter https://www.make.com/en/integrations/wix
9
In the Redirect URL field, enter https://www.integromat.com/oauth/cb/wix
10
Click Save
11
Copy the App ID and App Secret Key
12
Go back to Make, select the Search Wix Products module and click Create a connection
13
Paste the App ID and App Secret from Step 11
14
Click Save
15
From the pop-up window, select your Wix site and Agree & Add the app
16
Click OK to close the module

1
Select the Custom JS module
2
In the X-RapidAPI-Key field, use the test API key or follow this guide to get your own API key
3
Click Save then OK

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

Did this article answer your questions? Need help with anything? Please click below to contact us.