Development

Learn how to develop themes on Fynd Commerce.

📄️ Theme Best Practices

Comprehensive checklist of best practices for building Fynd Commerce themes with React, covering Fynd Platform Interface (FPI), React, JavaScript, and general development guidelines. Follow SSR-compatible patterns, avoid common pitfalls with window and document objects, and optimize theme performance. Essential reference for partners developing production-ready themes.

📄️ Boilerplate Overview

Overview of the Fynd Commerce theme boilerplate, a pre-written codebase that accelerates theme development. Learn the theme directory structure, key files, and how the boilerplate serves as a foundation for building and deploying themes. Essential starting reference after generating a theme with FDK CLI.

📄️ ServerFetch Function

ServerFetch is a server-side data-fetching function for SSR in Fynd Commerce themes, used on PLP, PDP, and SEO-critical pages. Fetch data, execute FPI GraphQL APIs, and apply server-side logic before HTML is rendered using fpi, router, cookies, and themeId parameters. Runs only on the server during initial page render.

📄️ Auth Guard

Use authGuard functions to control route access in Fynd Commerce themes based on user authentication status. Learn loginGuard to redirect authenticated users from login/register pages and isLoggedIn to restrict pages to logged-in users only. Essential for securing account, checkout, and profile routes in theme pages.

📄️ Color Palette Mapping

Reference for CSS variables mapped by the Fynd Commerce theme engine for dynamic color palette theming. Use these variables in your stylesheets to apply seller-configured colors with fallback defaults. Enables consistent, customizable branding across all theme components.

🗃️ Data Mangement

4 items

🗃️ Global Provider Resolver

3 items

🗃️ Global Components and Hooks

2 items

📄️ Add Origin Tracking

Add Fynd origin tracking parameters (f_param, f_source, f_medium, f_content) to storefront product URLs for campaign and analytics tracking. Learn how Fynd's custom UTM approach differs from standard UTM parameters and integrates with FPI event analytics. Implement tracking in theme product URLs to capture user journey and marketing attribution data.