Skip to content
Search Articles/

less than a minute read • Updated

Create A Customer Portal In Webstudio

Overview

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

Enable Customer Portal

  1. 1

    In the Foxy admin, go to Settings > Customer Portal.

  2. 2

    Under Allowed Origins, specify which domains you want to allow the customer portal to be installed on (be sure to include both staging and custom domains).

  3. 3

    Configure other options as needed.

Add Code 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 Webstudio, go to your project.

  4. 4

    Click on the Webstudio logo (top left corner) and select Project Settings.

  5. 5

    In the General section, copy/paste the Foxy loader snippet in the Custom Code field.

  6. 6

    Right after this snippet, copy/paste the snippet below:

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

    Save changes.

Install Customer Portal

  1. 1

    In Webstudio, create a page for where you would like the customer portal displayed.

  2. 2

    In this new page, wherever you want the customer portal to load, add a 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

    Publish changes and test.

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

Style Customer Portal

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.

Enable 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 Webstudio (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 Webstudio 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 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.

Need Help?

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