Development

Learn how to develop themes on Fynd Commerce.

📄️ Theme Best Practices

Given below is a detailed checklist of best practices for Fynd Partners to follow while building a theme for Fynd Commerce using React:

A boilerplate is a pre-written codebase that speeds up development by providing a foundational template for building themes. The theme boilerplate serves as a foundation for building and deploying a theme on Fynd Commerce.

📄️ ServerFetch Function

The ServerFetch function is a server-side data-fetching function used during Server-Side Rendering (SSR). It allows themes to fetch data, execute FPI APIs, and apply server-side logic before HTML is rendered and sent to the browser. This function runs only on the server and is commonly used for Product Listing Pages (PLP), Product Display Pages (PDP), and other SEO-critical pages.

📄️ Auth Guard

The authGuard function is employed to regulate access to specific routes based on user authentication status. For instance, the loginGuard function, redirects authenticated users from certain pages such as 'login' and 'register', while the isLoggedIn function restricts access to the PageWithLoginCheck page solely to authenticated users.

📄️ Color Palette Mapping

This document provides an overview of CSS variables mapped by the Theme engine. These variables allow for dynamic theming of your application by utilizing the provided color palette settings. Each variable includes a fallback default value when applicable.

🗃️ Data Mangement

4 items

🗃️ Global Provider Resolver

3 items

🗃️ Global Components and Hooks

2 items

📄️ Add Origin Tracking

Urchin Tracking Module (UTM) parameters are standardized tags added to URLs to track the source, medium, campaign, and context of website traffic. By attaching these parameters, you can identify how users discover your products, which campaigns lead to clicks, and the context of each visit. UTM parameters have become the industry standard for tracking marketing campaigns and user acquisition sources.