Foxy is a powerful e-commerce platform that seamlessly integrates with Webflow. If you’re looking to add a robust online store to your Webflow website, Foxy has got you covered. In this tutorial, we’ll explore how Foxy integrates with Webflow and the steps you need to take to get started.
Getting Started:
To begin integrating Foxy with Webflow, you’ll first need to sign up for a Foxy account. Head over to the Foxy website and create an account by providing the required information. Once you’ve signed up, you’ll have access to the Foxy dashboard where you can manage your products, orders, and more.
Connecting Foxy with Webflow:
After creating your Foxy account, it’s time to connect it with your Webflow website. To do this, navigate to your Webflow project and open the Designer.
Go to Project Settings and select Integrations from the left-hand menu. Locate the E-commerce section and click on Enable E-commerce.
Foxy Integration:
Now that E-commerce is enabled in your Webflow project settings, it’s time to integrate Foxy. In your project settings, scroll down until you find the E-commerce section again. This time click on Connect Account under the Foxy integration.
Step 1: API Key
To integrate Foxy with Webflow, you’ll need an API key from your Foxy account. Go back to the Foxy dashboard and navigate to Integrations.
Under API & Webhooks, click on Generate New Key. Copy this key as we’ll need it in the next step.
Step 2: Connect Account
Back in your Webflow project settings, paste the API key you just generated into the corresponding field under Connect Account for Foxy integration. Click on Connect Account to establish a connection between Foxy and Webflow.
Creating Products:
Now that the integration is complete, it’s time to create your products. In the Foxy dashboard, navigate to Products and click on Add New Product.
Fill in the necessary details such as title, price, description, and images for each product. You can even create variants with different options like size or color.
Displaying Products:
To display your Foxy products on your Webflow website, you’ll need to use the Foxy embed code. In your Webflow project settings, go to Integrations and locate the Embed Code section for Foxy. Copy the provided code snippet.
Embedding Foxy Code:
In your Webflow Designer, open the page where you want to display your products. Add an Embed element to the desired location on your page. Paste the Foxy embed code into this element.
Customizing Your Store:
Foxy offers various customization options to ensure your store matches your brand’s aesthetics seamlessly. From colors and fonts to buttons and checkout pages, you have full control over the design of your store. To customize these elements, head over to the Design section in your Foxy dashboard.
Managing Orders:
Once customers start purchasing from your store, you can easily manage their orders in the Foxy dashboard. From order fulfillment and tracking to refunds and customer communication, everything can be done within Foxy.
In Summary:
Integrating Foxy with Webflow allows you to create a powerful e-commerce store that seamlessly blends with your website design. By following these steps outlined above – connecting accounts, creating products, embedding code, customizing store appearance – you’ll be well on your way to building a successful online business using Webflow and Foxy integration.
- Step 1: Sign up for a Foxy account
- Step 2: Enable E-commerce in Webflow project settings
- Step 3: Connect Foxy account with Webflow
- Step 4: Generate API key in Foxy dashboard
- Step 5: Paste the API key in Webflow project settings
- Step 6: Create and manage products in the Foxy dashboard
- Step 7: Embed Foxy code to display products on your Webflow website
- Step 8: Customize your store’s appearance in the Foxy dashboard
- Step 9: Manage orders and customer communication within Foxy dashboard
With the seamless integration of Foxy and Webflow, you can create a visually appealing online store with ease. Take advantage of this powerful combination to showcase and sell your products to a wider audience.