🗃️ Analytics
4 items
📄️ Add a shipping method with pickup points
In this guide, we'll go through the steps needed to retrieve pickup points from GraphQL and display them in a Map using Front-Commerce's component.
📄️ Add a sorting method in your Product List Page
This guide explains how to add a sorting criteria to your Product List Page (PLP).
📄️ Add a component to Storybook
Our goal with Front-Commerce is to give you the tools you need to develop a delightful user experience within your e-commerce shop. One of these tools is a Design System.
📄️ Add your own server timings
This guide explains how you can add new timings to the `Server-Timing` headers in your responses in Front-Commerce.
📄️ Before going to production
Before going into production, you should ensure that everything has been customized to provide the best possible experience to your users. Some features are not critical enough to block your development and you may have forgotten them during the project. This page contains a checklist to help you before the go-live!
🗃️ Caching remote data
6 items
📄️ Change a resolver behavior
This guide shows you how to properly override GraphQL field resolvers while maintaining clean, maintainable code.
🗃️ Configuration
4 items
📄️ Content Composition
Learn how to create and compose custom building blocks for your content using Front-Commerce's Content Composition API.
📄️ Create a Business Component
In this guide, we learn how to build a Business Component. The core concept is the same as creating a UI component.
📄️ Create a custom image adapter
Deliver enhanced and optimized images for every user with your custom adapter.
📄️ Create a UI Component
In this guide, you will learn how to build a UI Component. We will do so by creating our own. We will use Storybook in the process because we think it is a good way to be productive for this task.
📄️ Create a custom HTTP endpoint
In this guide, you will learn how to create a custom HTTP endpoint.
📄️ Create custom redirections
How to create custom redirections in Front-Commerce
🗃️ Customize HTTP headers
3 items
📄️ Customize Outbound Requests Metrics
How to customize the outbound requests metrics.
📄️ Customize routes programmatically
Front-Commerce allows you to customize routes programmatically through the Vite configuration. This guide explains how to filter and modify routes based on your specific needs.
📄️ Customize the sitemap
Learn how to customize the sitemap for both static and dynamic pages in your Front-Commerce application.
📄️ Customize the styles
This guide explains how to override a component in Front-Commerce, to customize the default styles
📄️ Customize WYSIWYG Platform
In this guide, you will learn the different WYSIWYG implementations available on Front-Commerce and how to customize them.
📄️ Debugging
This reference documentation explains how to debug your Front-Commerce app using breakpoints.
📄️ Dependency Injection
This guide walks through the process of utilizing Dependency Injection (DI) within your Front-Commerce application. DI is a pattern that allows classes to receive dependencies from external sources rather than constructing them internally, facilitating more modular, testable, and flexible code.
📄️ Display a map
Front-Commerce has a generic map component that modules can use to display maps. This guide explains how to use the feature in your application.
📄️ Display prices with or without taxes
This guide walks through the process of displaying prices with or without taxes within your Front-Commerce application.
📄️ Display WYSIWYG content
Let your users write their content without needing any HTML or React knowledge while still being able to deliver a qualitative UI (performant, responsive, accessible…) to customers.
📄️ Dynamic Routing
This guide explains how you can create dynamic routes for url rewrites in Front-Commerce.
📄️ Error Handling for routes
Learn how to effectively manage errors at various levels of your Front-Commerce application using ErrorBoundary components.
📄️ Extend layout route
This guide explains how you can extend an existing layout routes.
📄️ Extend the GraphQL schema
This guide explains how to customize the GraphQL schema to add your own domain objects
🗃️ Extend the Vite Configuration
3 items
🗃️ Extension Features
3 items
📄️ Flash messages
Learn how to push and display flash messages in your Front-Commerce application.
📄️ Handle file uploads
In this guide, you will learn how to handle file uploads.
📄️ Implement a Front-Commerce payment method
This guide explains how to implement a new payment method in Front-Commerce.
📄️ Improve your Core Web Vitals
Improve your site's performance with Core Web Vitals. Learn how these key metrics impact user experience, page speed, and SEO. This guide provides actionable insights to optimize loading times, responsiveness, and visual stability for better rankings and engagement.
📄️ In-Stock Alert
In-stock alerts allow users to subscribe to email notifications when a product is out of stock, so the customer can notify them as soon as it is back in stock. This guide explains how to enable the feature in your application and adapt it to your specific needs.
🗃️ Magic Button
4 items
🗃️ Maintenance Mode
3 items
📄️ Mutate Data Using Client Side Fetcher
Learn how to handle data mutations using Remix's `useFetcher` hook.
📄️ Mutate Data Using Forms
Learn how to handle data mutations using standard HTML forms with Remix's form handling capabilities combined with Front-Commerce's GraphQL mutations.
📄️ Optimize your image assets
Images are an important part of what your users will download during a visit to your store. Delivering images in an optimized way is tough in a mobile-first application. This guide explains what Front-Commerce provides to help you in this task.
📄️ Override a component
This guide explains how to override a component in Front-Commerce, to customize the theme of your application
📄️ Password fields
Your application will require customers to enter their password on several pages (registration, login, password recovery, etc...). This page contains all the information about how to adapt the default Front-Commerce behaviors.
🗃️ Performance
2 items
📄️ Prevent excessive usage with rate limits
This guide explores the implementation of rate limiting techniques to safeguard your applications from excessive use.
📄️ Display swatches in product overview
This guide walks through the process of enabling and configuring swatches in product overview pages within your Front-Commerce application.
📄️ Proxyfing invoices
Customers can have access to their invoices from their accounts. By default, if the integration supports it, invoices can be accessed from order pages and have an online HTML version with a printable-friendly theme. This guide explains how to adapt the feature to your needs.
📄️ PWA Setup
This guide explains how to setup your PWA.
📄️ Quick orders
Front-Commerce's QuickOrder component allows customers to add products to their cart by entering an SKU and a quantity. This component is self-contained and renders a compact form designed to be integrated into different contexts. This guide explains how to integrate this feature into your application.
📄️ Register an extension
This guide explains how to register an extension in a Front-Commerce application to leverage its features.
📄️ Retrieve server's metrics
Observability is a good way to understand how your production application behaves under different traffic conditions. This guide explains what is available in Front-Commerce to expose this information to external tools.
🗃️ Server-Side Events
3 items
📄️ Server Side Rendering (SSR)
Front-Commerce uses SSR to improve SEO and UX by serving HTML pages to users on their first hit to the server. This documentation explains everything you need to know about it when working on a typical Front-Commerce application.
📄️ Serving assets from a CDN/custom domain
You may want to use a different domain for your assets for several reasons (CDN, parallel downloads, security, organizational constraints…). This guide explains how to configure this in a Front-Commerce application.
📄️ Start Front-Commerce with PM2
Front-Commerce is a node.js application. You may want to run it in production with the PM2 Process Manager. This page explains how you could achieve this, and benefit from PM2 features such as; zero-downtime deployment, cluster mode, auto-reload, logs aggregation…
📄️ Translate your application
International e-commerce websites often need to translate their UI into several languages to make sure that they reach a broader range of customers. This documentation will show how this works for static content in your application.
📄️ Use custom shipping information
Learn how to implement custom shipping methods that require additional information from customers during checkout. While most shipping methods are straightforward, some specialized options like pickup points need extra details before order completion. This guide walks through implementing custom shipping methods with additional input fields, form validation, and data handling in your Front-Commerce storefront.
📄️ Use temporary shipping address
Learn how to implement temporary shipping addresses in Front-Commerce without saving them to the customer's address book. This guide explains how to override the default behavior where addresses are stored permanently.
📄️ Use Wishlist provider
Learn how to use the wishlist provider to manage wishlist related queries.