Create a customer portal in Webflow

Note

This feature is in private beta. For access, please apply here. Invites are sent out every week.

With our drop-in customer portal feature, you can easily allow customers to view order history, manage their subscriptions, update billing/shipping info, and more.

Demo

  1. Published Link
  2. Webflow Read-only Link

Installation

  1. In your Webflow Project, create a page for where you would like the customer portal displayed (ex: Dashboard)
  2. In this new page, wherever you want the customer portal to load, add an HTML Embed element.
  3. Inside of the HTML Embed element, copy/paste the snippet from here
  4. Replace CHANGE with your Foxy store subdomain. If you're using a custom subdomain, replace the entire url.
  5. In your Customer Portal Page Settings, copy/paste the snippet from here into the "Before </body> tag" section.
  6. Publish changes.

Giving Customers Access

To give customers access simply add a link to the customer portal page anywhere on your website. Only customers who created an account at checkout will be able to login. By default, customer accounts are enabled, but if you disabled them, you can enable them again in your Configuration Settings.

Styling

The Foxy customer portal uses the Lumo Theme for styling and elements. You can quickly and easily make styling changes by following the instructions below:

Note

Only the Lumo Light Theme is currently supported. You can still make the needed changes to the Light Theme for a dark background.

  1. Load up the Lumo Theme Editor here.
  2. Make desired style changes.
  3. Click the download button.
  4. Copy the the displayed HTML.
  5. In your Customer Portal Page Settings, paste the copied HTML into the "Inside <head> tag" section.
  6. Replace all instances of lumo with foxy.
  7. Publish changes.

Single Sign On

Please follow the instructions below to keep logged in customers for the customer portal, logged in on the Foxy checkout as well.
  1. In Foxy, go to Advanced Settings here.
  2. In the "Store Secret" field, click "Show".
    - If there is a single value in "Store Secret", copy it out to the computer's clipboard.
    - If you see multiple name/value pairs, select the value between the quotes listed for "sso" and copy it.
  3. Go to the CyberChef website here.
  4. Replace "YOUR_SECRET_HERE" with the "Store Secret" you copied in Step 2.
  5. Copy the output value.
  6. Create a blank page in Webflow (the name and slug of the page can be anything).
  7. For the newly created page, go to Page Settings and copy/paste the snippet from here into the "Before </body> tag" section.
  8. Replace "FOXY_SUBDOMAIN" with your Foxy subdomain, like mystore.foxycart.com or secure.mystore.com (found in your Settings here).
  9. Replace "SECRET_OUTPUT" with the output value from Step 5.
  10. Publish changes.
  11. In Foxy, go to Advanced Settings here.
  12. Enable the "Single Sign On" option.
  13. Paste the url of the new page you created in Webflow into the "Single Sign On URL" field.
  14. Save changes.
  15. Test by logging into the customer portal, add a product to cart, and proceed to checkout. You be logged in on the checkout page.

Extending The Customer Portal

The customer portal can be extended with new functions and features. We'll be providing documentation on this soon. Please don't hesitate to contact us if there's something you're wanting to do in the customer portal.

Feedback

If you've found a bug/issue or simply have a suggestion, please fill out our feedback form here.

In This Article

Related Articles

Create a purchase form with Webflow's Form Builder
Create a purchase button in Webflow
Manage product inventory with Webflow's CMS
Add a mini-cart to your Webflow website

Need help?

Can't find the answers you're looking for? Our team is here to help. Please click below to contact us.

Contact Us