Get Started

This page provides all the steps needed to create your first extension. It covers the following tasks:

1. Install FDK-CLI
2. Login to your Fynd Partner Account
3. Generate boilerplate for extension
4. Preview your theme

Pre-requisite

Before you begin creating a theme, you need:

• Git↗ and Node.js v18↗ or later
• Account in Fynd Partners↗
• Development company

Steps to create a Development Company

1. Go to Fynd Partners↗.
2. Login to the Fynd Partners.
3. Select a suitable organization.
4. In the left pane, click Companies and go to Development tab.
5. Click Add.
6. Fill in the required details.
7. Click Save. Your account is created and will be available in the development company page.
8. Click the required development company from the listing page. You will be redirected to the development company in the Fynd Commerce.

Install FDK CLI

FDK CLI is a CLI tool that helps developers build themes, extensions, etc. Follow the below instructions to install FDK CLI.

• Run the following command in your terminal to install FDK CLI:

npm install -g @gofynd/fdk-cli

note

If global installation fails due to restricted permissions you can execute the command with sudo/root permissions. TK

You can run fdk --version to check if FDK CLI is successfully installed.

Login to your Fynd Partner Account

The following steps explains how to login to your Fynd Partners accoun using FDK-CLI:

1. Run the following command to log into your partners account:

fdk login

And after running the login command you will be redirected to the homepage of the partner’s panel of that specific env.

2. On top-right corner, you will see Manage button if you are logged in. Else you will see Login option.
3. Clicking Manage button and choose Partner Organization page.

note

If you want to use a different environment (cluster) for theme development, run fdk login --host your-partner-domain to change the active environment. This command will change the active environment to the provided cluster host.

For example, if your partner account exists at partners.fynd.com, run the following command to set the active environment to the Fynd cluster:

fdk login --host partners.fynd.com

4. Select the Partner Organization through which you want to create your theme. You will get a success message if you are successfully logged in.

note

You can run fdk user to verify if you are logged in. If you are successfully logged in then you will see the name and email of the user.

Generate Boilerplate Code

1. Run the following command to initialise a new extension.

fdk theme new --name name-of-the-theme

note

Emerge is Fynd Cpmmerce's reference theme and you can use it as the starting point for building a theme.

2. Select the account type for which you want to create the extension.
3. Select an account in which you want to create a theme. FDK-CLI will list the development accounts or live accounts depending on account type chosen.
4. Select Sales Channel in which you want to create your theme. FDK-CLI will list the sales channels available in the account.

A folder with the theme name will be created into your desktop.

Preview Theme Locally

1. Run the following command to navigate to your theme’s folder:

cd theme-name

2. Run the following command to serve your theme locally:

fdk theme serve

Your theme will be previewed on localhost:5001. The Port number might change based on the availablility of the port during the theme serve command.

If you check all the files and folders inside the theme folder, you will find multiple files defining the code and assets of the predefined theme.

Preview Theme in Fynd Commerce

Do the folowing steps to preview the newly created theme:

1. Select the development account in our Fynd Commerce.
2. Navigate to sales channel → Appearance → Themes. The new theme appears under Theme Drafts section.
3. Navigate to your theme and click on three dots (⠇)then click Preview.

🏆 Congratulations!

You've successfully created and launched your first theme.

Sync Theme Changes

note

Ensure that the changes made to the theme are functioning correctly on the local environment before syncing it to the application. Refer to the Preview Theme Locally for instructions.

Syncing the Theme

Do the following steps to sync the theme with the application:

1. Ensure that you are inside the directory of the theme you want to sync.
2. Run the following command to initiate the theme sync:

fdk theme sync

If the command fails, it indicates a potential issue with the code. In such cases, review and fix any errors before running the command again.

Theme Verification

Once the theme sync command is completed, run the following command to verify the changes:

fdk theme open

This command will redirect you to the live preview page of the application, where you can see the updated theme and confirm that the changes have been successfully applied.