How Do I Integrate Foxy Into Webflow?

by

Integrating Foxy into Webflow: A Step-by-Step Guide

Are you looking to enhance your Webflow website with e-commerce functionality? Look no further!

With Foxy, you can easily integrate a powerful and customizable online store into your Webflow site. In this tutorial, we’ll guide you through the process of integrating Foxy into Webflow, so you can start selling your products or services in no time.

Getting Started

Before we dive into the integration process, let’s make sure you have everything you need. Here’s a checklist to get you started:

  • A Webflow account
  • A Foxy account
  • Your products or services ready to be sold

If you haven’t already done so, sign up for both Webflow and Foxy accounts. Once you have your accounts set up and your products or services prepared, follow the steps below to integrate Foxy into Webflow.

Step 1: Create a New E-commerce Project in Webflow

Log in to your Webflow account and create a new project by clicking on the “Create New Project” button. Choose the “E-commerce” option when prompted and select a template that suits your needs. This will create a pre-built e-commerce layout for your website.

Step 2: Connect Your Foxy Account to Webflow

Once you’ve created an e-commerce project in Webflow, it’s time to connect it with your Foxy account. To do this, follow these steps:

  1. In the Designer panel on the left side of the screen, click on “E-commerce”.
  2. Scroll down and click on “Connect Foxy”.
  3. A modal will appear asking for your Foxy account credentials. Enter your Foxy account’s subdomain and click on “Connect Account”.
  4. Follow the on-screen instructions to authorize Webflow to access your Foxy account.

Once the integration is complete, you’ll be redirected back to the Webflow Designer panel.

Step 3: Configure Your Foxy Settings

With the connection established between Webflow and Foxy, it’s time to configure your Foxy settings. Follow these steps:

  1. In the Designer panel, click on “E-commerce” once again.
  2. Scroll down and click on “Foxy Settings”.
  3. You’ll be presented with various options to customize your store, including payment gateways, shipping methods, tax settings, and more. Make sure to set up these options according to your preferences.
  4. Save your settings once you’re satisfied with the configuration.

Step 4: Add Products or Services

To start selling your products or services through Foxy in Webflow, you need to add them to your store. Here’s how:

  1. In the Designer panel, click on “CMS” at the top of the screen.
  2. Add a new Collection for your products or services by clicking on the “+” button.
  3. Add fields for each product’s name, description, price, and any other relevant information.
  4. Add individual items to your collection by clicking on “Add New Item”. Fill in the details for each product.

Remember to save your changes before proceeding.

Step 5: Design Your Storefront

Now that you have set up products or services in your Foxy dashboard, it’s time to design your storefront in Webflow. Follow these steps:

  1. In the Designer panel, click on “Pages” and select “Store”.
  2. Customize the appearance of your storefront by editing the page’s layout, adding images, and applying styles using Webflow’s powerful design tools.
  3. Drag and drop the Foxy elements onto your store page to display products or services dynamically.

With your storefront designed and products or services displayed, you’re ready to launch your online store powered by Foxy!

Conclusion

Integrating Foxy into Webflow is a seamless process that allows you to create a stunning e-commerce website with ease. By following this step-by-step guide, you can connect Foxy to Webflow, configure settings, add products or services, and design a visually appealing storefront.

Now that you have the power of Foxy at your fingertips, start selling your products or services to a wider audience. Happy selling!