Skip to content
Search for answers/

4 min read • Updated 8 days ago

Create A Customer Portal In Webflow

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

Foxy Code Snippet

While not required for the customer portal, adding the Foxy code snippet will display the sidecart when a customer adds a product to cart and store customer sessions. If you've already done this, you can proceed to the next section of this tutorial.

  1. 1

     In the Foxy admin, click on the Sample Code link under the Store column in the navigation at top. 

  2. 2

     Copy the code snippet from Step 1. 

  3. 3

     In Webflow, go to your Site Settings and click on the Custom Code link at top. 

  4. 4

     Paste the copied code snippet into the Footer Code section and save changes. 

Installation

  1. 1

    In your Webflow Project, create a page for where you would like the customer portal displayed (ex: Dashboard)

  2. 2

    In this new page, wherever you want the customer portal to load, add an HTML Embed element.

  3. 3

    Inside of the HTML Embed element, copy/paste the snippet below:

    <foxy-customer-portal base="https://CHANGE.foxycart.com/s/customer/">
</foxy-customer-portal>
  4. 4

    Replace CHANGE with your Foxy store subdomain. If you're using a custom subdomain, replace the entire url.

  5. 5

    In your Webflow Project Settings > Custom Code > Footer, copy/paste the following snippet (after your Foxy loader snippet):

    <script type="module">
    import 'https://cdn-js.foxy.io/elements@1/foxy-customer-portal.js';
    const I18nElement = customElements.get('foxy-i18n');
    const i18nBase = 'https://cdn-js.foxy.io/elements@1/translations';
    I18nElement.onResourceFetch((ns, lang) => fetch(`${i18nBase}/${ns}/${lang}.json`));
</script>
  6. 6

    Publish changes and test.

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:

  1. 1

    Load up the Lumo Theme Editor here.

  2. 2

    Make desired style changes.

  3. 3

    Click the download button.

  4. 4

    Copy the the displayed snippet.

  5. 5

    In your Customer Portal Page Settings, paste the copied HTML into the "Inside <head> tag" section.

  6. 6

    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. 1

    In Foxy, go to Advanced Settings here.

  2. 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. 3

    Go to the CyberChef website here.

  4. 4

    Replace "YOUR_SECRET_HERE" with the "Store Secret" you copied in Step 2.

  5. 5

    Copy the output value.

  6. 6

    Create a blank page in Webflow (the name and slug of the page can be anything).

  7. 7

    For the newly created page, go to Page Settings and copy/paste the snippet from here into the "Before </body> tag" section.

  8. 8

    Replace "FOXY_SUBDOMAIN" with your Foxy subdomain, like mystore.foxycart.com or secure.mystore.com (found in your Settings here).

  9. 9

    Replace "SECRET_OUTPUT" with the output value from Step 5.

  10. 10

    Publish changes.

  11. 11

    In Foxy, go to Advanced Settings here.

  12. 12

    Enable the "Single Sign On" option.

  13. 13

    Paste the url of the new page you created in Webflow into the "Single Sign On URL" field.

  14. 14

    Save changes.

  15. 15

    Test by logging into the customer portal, add a product to cart, and proceed to checkout. You should 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.

Need Help?

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