Wondering how Webflow and WigWag work together, watch the video below and then read the article for more detailed steps.
Webflow is a platform that lets you build powerful websites without any code. Yet the full power of Webflow's platform has not been realised in South Africa, as they do not cater for payments locally.
WigWag has partnered with Foxy.io, the leading cart plugin so you can realise the full potential of Webflow as a e-commerce tool.
All you need is to add the Foxy plugin to your Webflow site and activate WigWag on Foxy. Follow the easy steps below to see how.
Step 1: Create accounts
You'll need to set up both a WigWag and a Foxy account.
A WigWag account is easy and FREE to set up. You can do it in 3 simple steps:
Create an account
Tell us about your business
Verify your account by sharing some documents with us
The process is detailed in this helpful article.
Sign up for your WigWag Account here.
Foxy allows users to create a completely FREE test account.
You can sign up here.
Important to note, while you can fully test and use the Foxy plugin you will need to activate a Foxy subscription to make live payments.
See the different Foxy Pricing Plans here. Remember though, Foxy offers an unlimited free trial, allowing unlimited tests until you're ready.
By default Foxy will have all currencies configured to USD, to change to ZAR you'll need to:
On your Foxy Admin Page go to Templates -> Template Sets
In
Localeselect English locale for South Africa (Currency: ZAR: R)Save the settings by clicking
Update Template Set
Step 2: Add Foxy to Webflow
Foxy works by allowing you to connect your Webflow site to their Checkout Cart and passing the content and information about the items you're selling to the Checkout Cart, creating what Foxy calls Foxy Products. Which are in essence, the items you're selling in the Checkout Cart so your customer can pay for them.
Foxy has various ways you can use them on Webflow depending on your use case. Such as if you're selling a single product, many products or what type of Webflow platform you're using.
We'll go in-depth below on Foxy's recommended use case, many products using Webflow CMS.
Also check out Foxy's own tutorial, which also includes a demo-site and clonable project.
Before getting started ensure that you have all your products loaded as a CMS Collection on your Webflow site.
Once you have this set up, follow the below steps.
On your Webflow site open
Site Settings
Input the
Sample Codefrom Step 1 on your Foxy admin page into the Footer code section and click SaveSet up a simple form that will be your "Add to Cart" page
The most critical element to include is the "Submit" button, see an an example below
In the Form Settings add the below URL to the Action setting
https://[YourFoxyStoreSubdomain].foxycart.com/cart
You can find your Subdomain here
Set the Method as
POST
From the Webflow Elements section, add an HTML Embed Element anymore to the form
Get the
codefrom this link and add it to HTML ElementReplace the ALL CAPS words with the names of the CMS fields
Use this link to retrieve additional code
Open the Product Template Settings and add the code to the Body Section
You're almost set!
Step 3: Activating WigWag on Foxy
Once you have Foxy set up on your site, you simply need to activate WigWag as your payment method on the Foxy Admin Page.
Log in to your Foxy Admin Page
Select the Payments Tab under the Store heading
In the Payment Tab, deselect the checkbox
Let customers pay with a Credit or Debit Cardand selectLive Servers
In the Payment Tab, scroll down to the WigWag option and check the box
At this stage you'll need to input your WigWag API keys and Secret
You can retrieve these from your WigWag Account page on your dashboard
Woohoo! You now have payments live on your Webflow store - get selling!