Skip to main content

Getting Started

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

  1. Install FDK CLI
  2. Log in to your Fynd Partners Account
  3. Generate boilerplate code
  4. Preview your theme

Prerequisites​

Before you begin creating a theme, you need:

Steps​

Install FDK CLI​

FDK CLI is a command-line tool that helps developers build themes, extensions, and more.

  • 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 run the command with sudo or root permissions.

    tip

    You can run fdk --version to check whether FDK CLI was installed successfully.

Log in to your Fynd Partners Account​

The following steps explain how to log in to your Fynd Partners account using FDK CLI:

  1. Run the following command to log in to your Fynd Partners account:

    fdk login

    Your browser will open so you can select the account where you want to create a theme.

    note

    For FDK CLI 8.0.6 or earlier, developers must enable Apps on Device in the browser to successfully log in to their Fynd Partners account.

  2. Select the Fynd Partners organization through which you want to create your theme. You will see a success message when you are logged in.

    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 sets the active environment to the provided cluster host.

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

    fdk login --host partners.fynd.com
    tip

    You can run fdk user to verify that you are logged in.

Generate Boilerplate Code​

  1. Run the following command to initialise a new theme:

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

    Turbo is Fynd Commerce's reference theme, and you can use it as a starting point for building a theme.

  2. Select the account type for which you want to create the theme.

  3. Select an account in which you want to create a theme. FDK CLI will list development or live accounts, depending on the account type you chose.

  4. Select the 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 on 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 may change depending on availability when you run the fdk theme serve command.

QG1

When you review the files and folders in the theme folder, you will find multiple files that define the code and assets of the predefined theme.

Preview Theme in Fynd Commerce​

Follow these steps to preview the newly created theme:

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

QG1

🏆 Congratulations!

You have successfully created and previewed your first theme. QG1

Sync Theme Changes​

note

Ensure the changes you made to the theme work correctly in your local environment before syncing them to the application. Refer to Preview Theme Locally for instructions.

Syncing the Theme​

Follow these 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. Review and fix any errors before running the command again.

QG1

Theme Verification​

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

fdk theme open

This command redirects you to the live preview page of the application, where you can view the updated theme and confirm that your changes were applied successfully.

QG1