Skip to main content

Storefront Integration

Quick Start​

This quick start gets your storefront integration live with the minimum required setup.

Portal configuration and Faslet-managed features

Your implementation is only one part of the setup. Visual customization such as colors, text, and some feature settings can be managed in the Faslet Partner Portal, and some features are enabled or disabled by Faslet on our side.

That means your developers should focus on sending the right data and rendering the widget in the right place. If a feature, button, or UI behavior is missing even though the code is correct, check the Partner Portal and contact your Faslet representative.

Do not hide <faslet-app>

Do not wrap <faslet-app> in a hidden container and do not apply display: none, visibility: hidden, or similar techniques to the widget root. That breaks normal Faslet behavior and can prevent features such as SIR, call-to-action popups, and try-on from working correctly.

If you want to use your own trigger or your own button styling, use Custom Button Styling instead of hiding the default implementation.

What you'll need​

  • Your Faslet SHOP_ID
  • Access to your product page template (PDP)
  • Access to your order confirmation / thank you page template
  • A product identifier (PRODUCT_IDENTIFIER) that is consistent across product pages and order tracking
Need a staging or test store?

If you want to test your storefront integration in a sandbox or staging environment, reach out to Faslet Support. We can create a test store for you.

Required steps​

  1. Add order tracking first
  • Add faslet-orders.js on the thank you page
  • Send a widget_order_track event for each ordered product
  • Follow the full guide in Headless/Other
  1. Add the Faslet snippet on the PDP
  • Add <faslet-app> and faslet-app.min.js on product pages
  • Pass at least: shop-id, product-identifier, brand, and product-img
  • Follow the full guide in Headless/Other
  1. Validate your setup

Example backlog ticket​

Product owners can copy/paste the example below into their backlog and adapt it to their own storefront and internal delivery process.

# Implement Faslet Size Assistant
## Description

Implement the Faslet Size Assistant on all product pages and enable order tracking to support size recommendations and analytics.

This includes rendering the assistant, passing product data, enabling add-to-cart, and tracking completed orders.

## Acceptance Criteria
- [ ] Faslet script is loaded on all product pages
- [ ] Size Assistant button is visible and opens correctly (contact Faslet support to activate a test product - by default the button will not show)
- [ ] Product and variant data are passed correctly (id, size, availability, price)
- [ ] Users can add the recommended size to cart from the assistant
- [ ] Add-to-cart handles errors (e.g. out of stock)
- [ ] Order tracking script is present on the confirmation/thank you page
- [ ] Orders send required data for all orders (order ID, products, variants, quantity, price)
- [ ] Tracking event is sent per product in the order for all products ordered

## Definition of Done
- [ ] Assistant works end-to-end (open → recommend → add to cart)
- [ ] Orders are tracked and visible in Faslet dashboard
- [ ] No errors in console or failed network requests

Choose your integration​

Faslet provides integrations for several platforms, as well as the ability to integrate our Faslet widget into whatever custom platform you have.

Choose the platform or technology stack your shop uses:

Platforms​

Technology​

Headless / Other​