Skip to content
Search Articles/

5 min read • Updated 2 hours ago

Manage products with Framer CMS

Use Framer CMS to manage your product data and pages.

Overview

This article provides information on how to manage Foxy products with Framer CMS and dynamically populate add to cart form data with Framer CMS data (ie: product name, price, image, etc.).

Want to integrate Foxy without using Framer CMS? No problem. You can manually link a Framer button to a Foxy purchase link. Links can be created manually or via our Link & Form Builder (available in the Foxy admin).

Create Products CMS Collection

  1. 1

    In Framer, create a new CMS collection for your product data (or access your existing collection).

  2. 2

    Add fields for any data/media needed to build out your product detail page.

  3. 3

    Add fields for any data/media that needs to be sent to the cart when a customer clicks "add to cart" (ie: product name, price, sku, image, etc.). You can use the same fields for both your page and the add to cart form.

Add Snippets

  1. 1

    In the Foxy admin, go to Settings > Website & Products.

  2. 2

    Copy snippet from the Foxy loader.js section.

  3. 3

    In Framer, go to Site Settings > General.

  4. 4

    Scroll to the Custom Code section.

  5. 5

    In the End of <body> tag text box, paste the copied Foxy loader.js snippet.

  6. 6

    Copy the code snippet below:

    <!-- FOXY + FRAMER -->
<script src="https://cdn-js.foxy.io/website-helpers@1/foxy-framer.js"></script>
  7. 7

    Paste snippet in same section, after the Foxy loader.js snippet.

  8. 8

    Click the Save button.

Create Add To Cart Form

  1. 1

    In Framer, navigate to your product detail page.

  2. 2

    From the Insert Menu, click to add a new form element (drag to wherever you want the add to cart form to be displayed on the page).

  3. 3

    Navigate to the Assets tab.

  4. 4

    Click the + button in the Code section and select New Code File.

  5. 5

    Enter a title for the file (ie: Foxy), choose New Override and click Create.

  6. 6

    Remove all example code in the code editor.

  7. 7

    Copy the code snippet below and paste in the code editor:

    import type { ComponentType } from "react"

export function withFoxyForm(Component): ComponentType {
    return (props) => {
        return <Component {...props} data-foxy-product="form" />
    }
}
  8. 8

    In your product detail page, click on your add to cart form.

  9. 9

    In the form element settings, click the + button in the Code Overrides section.

  10. 10

    For the File field, choose the file just created (ie: Foxy).

  11. 11

    For the Override field, choose withFoxyForm.

Add Product Data & Fields

At minimum, Foxy just needs a product name and price. This can be dynamic data from from Framer CMS, static, or a mix of both dynamic and static. In addition, you can pass any other hidden, visible, or configurable data.

Name (required)

  1. 1

    Add a text input field to your add to cart form.

  2. 2

    Remove the text element for the field label (this will be a hidden field so no label is needed).

  3. 3

    In the input element settings, change the Type to Text.

  4. 4

    Change the Name to name (lowercase).

  5. 5

    Add a Value property to the element by clicking the + button beside the Input section title.

  6. 6

    Click the + button beside Value, then hover over Set Variable and choose your product name CMS field.

  7. 7

    Add a Hidden property to the element.

  8. 8

    Set the value to Yes.

Price (required)

  1. 1

    Duplicate the product name input element.

  2. 2

    Change the Name to price (lowercase).

  3. 3

    Change the Value to your product price CMS field.

Image (optional)

By default, the first image found within the form element will be shown in the Foxy cart. If you would like to use a different image, please follow the stops below:

  1. 1

    Navigate to the Assets tab.

  2. 2

    Open the code file for the Foxy code overrides (ie: Foxy.tsx).

  3. 3

    Copy the code snippet below:

    export function withFoxyImage(Component): ComponentType {
  return (props) => {
    return <Component {...props} data-foxy-product="image" />;
  };
}
  4. 4

    In the code editor, paste the code snippet below any existing code.

  5. 5

    Go back to your product detail page.

  6. 6

    In the image element settings, click the + button in the Code Overrides section.

  7. 7

    For the File field, choose the Foxy code overrides file (ie: Foxy)

  8. 8

    For the Override field, choose withFoxyImage .

Quantity (optional)

By default, a quantity of "1" will be added to cart. Once a product is in the cart, customers can easily change the quantity. If you'd like to allow customers to specify a quantity before adding a product to cart, please follow the steps below:

  1. 1

    Duplicate one of your other fields or add a new text field.

  2. 2

    Change the Type to Number.

  3. 3

    Change the Name to quantity (lowercase).

  4. 4

    Change the Value to 1.

  5. 5

    Set the Required property to Yes.

  6. 6

    Add a Min property and set its value to 1.

Custom Data & Fields (optional)

A complete list of Foxy standard product parameters can be found here. You can pass these parameters as hidden or visible/configurable fields. In addition, you can pass any custom parameters to the cart (ie: Color, Size, Format, etc.). You can use any type of field: input, select, radio, checkbox, etc. Values can be CMS driven, static, or set by the customer.

Testing

To test your add to cart forms, simply publish your Framer site and navigate to one of your product pages. Click to add product to cart. You should see product information and image (when applicable) in cart.

Limitations

Currently, this approach does not support CMS driven product variants. That said, you can have static/preset product variants (ie: a select field with size options). We're still working on this, but if you have a need for dynamic variant support, please let us know.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.