WigWag on Webflow
Updated this week

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:

  1. Create an account

  2. Tell us about your business

  3. 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 Locale select 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 Code from Step 1 on your Foxy admin page into the Footer code section and click Save

  • Set 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 code from this link and add it to HTML Element

  • Replace 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 Card and select Live 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!

Did this answer your question?