How Do I Add Foxy to Webflow?

by

Adding Foxy to your Webflow website is a great way to enable e-commerce functionality and start selling products or services directly from your site. Foxy provides a seamless integration that allows you to manage your products, inventory, and transactions all in one place. In this tutorial, we’ll walk you through the steps to add Foxy to your Webflow site.

Step 1: Sign up for a Foxy account

If you haven’t already, head over to the Foxy website and sign up for an account. Foxy offers different pricing plans depending on your needs, so choose the one that suits you best. Once you’ve signed up and logged in, you’re ready to integrate Foxy with Webflow.

Step 2: Set up your store in Foxy

Before integrating Foxy with Webflow, you’ll need to set up your store in the Foxy dashboard. This involves adding your products or services, setting prices, and configuring any necessary options or variants.

To create a new product in Foxy:

  1. Log in to your Foxy account.
  2. Click on the “Products” tab.
  3. Select “Add New Product”.
  4. Name your product and provide a Description.
  5. Add an image of the product by clicking on “Upload Image”.
  6. Add variants, such as different sizes or colors if applicable.
  7. Pricing: Set the price for each variant.
  8. Save your changes.

Repeat these steps for all the products or services you want to sell on your Webflow site.

Step 3: Install the Foxy script on your Webflow site

To integrate Foxy with Webflow, you need to insert the Foxy script into your site’s code. Here’s how:

  1. Open your Webflow project in the Designer.
  2. Select the page where you want to add Foxy (e.g., Home, Shop, Product).
  3. In the right-hand sidebar, click on “Add Elements”.
  4. Select “Custom Code” from the element list.
  5. Paste the Foxy script provided by Foxy into the “<head>” section of your page’s custom code settings.
  6. Save and Publish your changes.

Step 4: Configure Foxy settings in Webflow

To make sure Foxy works correctly on your Webflow site, you’ll need to tweak a few settings:

  1. In the Designer, select the page where you added the Foxy script.
  2. In the right-hand sidebar, click on “Add Elements“.
  3. Add a link or button (depending on how you want customers to access your store) to navigate to your store.
    • Name: Give it a name like “Shop” or “Buy Now”.
    • Link: Set the link to the page where you want to display your products or services.
  4. Customize the design of your store elements (e., buttons, cart) using Webflow’s styling options.
  5. Save and Publish your changes.

Step 5: Test your Foxy integration

To ensure everything is working as expected, it’s crucial to test your Foxy integration. Here’s what you should do:

  1. Add a product to your cart.
  2. Proceed to checkout and complete a test transaction (Note: Use test payment details provided by Foxy).
  3. Verify that the transaction is successful and that you receive a confirmation email from Foxy.

Congratulations! You’ve successfully added Foxy to your Webflow site.

Now you can start selling products or services and manage your store seamlessly with Foxy’s powerful e-commerce features. Remember to regularly update your products, manage inventory, and provide excellent customer support for a smooth shopping experience!