Create a purchase button in Webflow

Add sidecart functionality

1. 1

   Go to the Foxy admin

2. 2

   Go to Settings > Website & Products

3. 3

   Copy the snippet from the Foxy loader.js section

4. 4

   In Webflow, go to Site settings

5. 5

   Click Custom code

6. 6

   Paste the snippet into the Footer code field

7. 7

   Click Save changes, then publish your site

Add a link or button

You can turn any Webflow element into a purchase link, including text, buttons, and images.

1. 1

   In the Foxy admin, go to Link & Form Builder

2. 2

   Build your item: name, price, and any other parameters you need

3. 3

   Copy the generated link

4. 4

   In Webflow's Designer, add a Button element (or select an existing one)

5. 5

   Modify the button text and style as needed

6. 6

   Under Link Settings, paste your Foxy link

7. 7

   Publish your changes

Notes

• Set your product's parameters in the Link & Form Builder rather than editing the URL afterwards. See Standard parameters for what's available.

• If your store has HMAC product validation enabled, the builder signs your links automatically, and editing any parameter afterwards breaks the signature. Rebuild the link in the builder instead.

• Webflow renamed Project Settings to Site settings since this article was last written, and custom code is now split into Head code and Footer code.