Manage Multiple Products with Webflow's CMS

Using Webflow's Visual CMS and Foxy's powerful ecommerce platform, we show you how to build a responsive online store in minutes. Skip the tutorial and start selling right away with our free Webflow template.

Update

Our integration with Webflow's CMS now supports product inventory management. Setup instructions can be found here.

Demo

In this article

Sidecart Functionality

To display the sidecart when a customer adds a product to cart, you must first load the needed Foxy loader file into your website.

1
In the Foxy admin, go to the Sample Code page here
2
Copy the code snippet from the Step 1 textarea
3
Copy the code snippet from the Step 1 textarea
4
In Webflow go to your Site Settings page
5
Click on the Custom Code link at top
6
Paste the code snippet into the Footer Code textarea
7
Click the green “Save Changes” button

Category and Product Collections

Before designing your online store, we recommend creating and populating your Webflow Collections so that you have data to work with.

1
Click on the Collections icon
2
Create a new collection for your Product Categories
3
Add desired fields to collection.
4
Populate collection with your product categories
5
Repeat steps for your Products Collection

Foxy's mini-cart displays how many products are in the customer's cart while providing a simple link that can be clicked to view full cart details. The mini-cart can be customized even further. Click here to learn more.

1
Design your navigation as desired giving navigation links their own class name. (This class name will be used to style your View Cart link)
2

In the navbar menu add a HTML Embed element and copy/paste the snippet of code below. Be sure to use your Foxy store subdomain and give the link the same class you gave your navbar links earlier.

<a href="https://YOUR-SUBDOMAIN.foxycart.com/cart?cart=view" class="YOUR-CLASS-NAME" style="display: block;">
  Cart (<span data-fc-id="minicart-quantity">0</span>)
</a>

Product Category Navigation

The product category navigation loads categories from Product Categories Collection, allowing visitors to quickly navigate between product categories.

1
Add a Dynamic List element and choose your Product Categories collection.
2
Add a Text Link element to the Dynamic Item.
3
Set the link destination as "Current Category".
4
Get text from the Category Name.
5
Style Dynamic Lit items as desired.

Product Grid

The product grid loads products from the Products collection. Visitors can click on each product to be taken to the Product Detail page.

1
Add a Dynamic List element and choose your Products collection.
2
Configure grid layout as desired.
3
Add a Link Block element to the Dynamic Item.
4
Set the link destination as "Current Product".
5
Add desired elements (ie: Heading element for product pricece, Image element for product image)
6
For each element, populate text and images with "Current Product" data.
7
Style each element as desired as desired.

Product Categories Collection Template

This is the page that will be shown when a visitor clicks on a specific Product Category. Related products from the Products Collection will be shown.

1
Copy/paste primary navigation, product category navigation, and products grid elements to your Product Categories Collection template. You can learn more about Webflow collection templates here.
2
Select the Dynamic List (products grid) and click on the Settings icon.
3
Add a new filter with the settings "Product Category > Equals > Current Category". This will ensure that only products from current product category are displayed.

Products Collection Template

This page will display product information along with add-to-cart option.

1
Add and style desired elements (ie: Heading element for product name, Image element for product image)
2
For each element, populate text and images with "Current Product" data.
3
Add and style a Button element.
4
Add a HTML Embed element where you want your add-to-cart button to be.
5

Copy/paste the following snippet into the HTML Embed element.

<a href="https://YOUR-SUBDOMAIN.foxycart.com/cart?name=CHANGE&price=CHANGE&category=CHANGE&image=CHANGE&code=CHANGE" class="CHANGE">
  Add To Cart
</a>`
6
Replace "YOUR-SUBDOMAIN" with your Foxy subdomain.
7
Give the product link the same class name you gave the button you just created. This will apply same styling to your new add-to-cart button.
8
For each product parameter (ie: name, price, category) replace the value "CHANGE" with corresponding dynamic field by clicking on "Add Field".
9
You can now safely remove or hide the first button you created.

Wrapping Things Up

Congrats on setting up your new online store. We hope this tutorial helped make things easier and more fun. If you happened to run into any issues or roadblocks, please don't hesitate to contact us.

Related Articles