Sync Code Between Themes

When managing multiple themes within your Fynd Partner account, you may need to sync or transfer code from one theme to another—for example, to promote changes from a development version to a live theme.

For example, you need to sync code from a theme called Theme-A (source) to Theme-B (target and your live storefront theme). Once the changes are stable, you want to reflect those changes in Theme-B. Instead of transferring files manually, you can use FDK’s built-in theme sync functionality to push code changes directly.

caution

Cross-framework syncing (e.g., React to Vue or vice versa) is not supported. For example, the React theme can only sync with other React themes.

Create Context File

Before syncing the code, you need to create a context in the source directory. This allows the FDK-CLI to understand where to push the code.

Do the following steps to create context:

1. Run the following command in the root of the source theme:

fdk theme context -n <context-name>

This command initializes a .fdk directory inside the source theme and creates a context.json file that holds the syncing configuration.

note

After running the above command, you may be prompted to log in to your Fynd Partners account (if you have not already authenticated it).

Run the fdk login command to log into your Fynd Partner account.

2. Choose Yes to initialize the folder as a theme. If you select No, the context creation process will be aborted.
3. Choose between development and live account type.
4. Choose your company from the listed options. This list will show only the companies that belong to your partner account.
5. Choose the sales channel associated with the target theme.
6. Choose the target theme where you need to sync the code. Here, Theme-B is the theme that will receive the synced code.

Once the above steps are completed, your context is ready.

{
  "theme": {
    "active_context": "<context-name>",
    "contexts": {
      "themecont": {
        "name": "<context-name>",
        "application_id": "1234567890e1234e1111b1fc",
        "domain": "fyndpartner.fynd.io",
        "company_id": 1234,
        "theme_id": "12345678edb12345a9ea12e9",
        "application_token": "ABCDmnONn",
        "theme_type": "vue2",
        "env": "api.fynd.com"
      }
    }
  },
  "partners": {}
}

Sync the Code

• After context setup, run the following command to push the code:

fdk theme sync

This command uploads the current code from source to target, which was selected during context setup.

Verify Theme Sync in Dashboard

Once the context is created successfully, log in to your Fynd Commerce account.

Go to Sales Channel → Theme → Store Design → Theme-B. You will now see your Theme-A code changes reflected in Theme-B.