Skip to main content

Customize a Theme

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

As a theme developer, you can customize themes for Fynd Platform merchants. These customizations might range from small tweaks to complete redesigns.

In this tutorial, you'll use FDK CLI to customize a merchant's theme and then share your progress with them.

What you will learn?​

After you've finished this tutorial, you'll have accomplished the following:

  • Gaining access to merchant’s application.
  • Setup your local development environment
  • Download a copy of the merchant's theme
  • Make changes and preview them in real-time
  • Sync your changes

Before we start​

There are a few prerequisites before we can start working on our theme.

  • Node.js: In order to install FDK CLI you will need to have Node.js (we recommend the latest stable version- but the maintenance and active LTS releases will also work) installed on your computer. Download the recommended version of Node.js.

  • Git: Additionally, you'll need Git to create new themes. You can download Git from here.

  • Basic knowledge of VueJS.

  • Add entry to /etc/hosts

    • Execute the command sudo nano /etc/hosts
    • Add the following lines to the end of the file
127.0.0.1 localdev.fynd.com

Step 1: Request access to the merchant's application​

To work with the merchant’s theme you will need access to their application. You will have to ask them to add you as a Staff member to their application & provide permission to manage themes. After they have added you as staff you can visit Fynd Platform and see their company in the company listing.

Step 2: Install FDK CLI​

FDK CLI is a CLI tool that helps developers build themes, extensions, etc. Follow the below instructions 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.

To verify the installation was successful use the below command. If everything went well you should be prompted with the latest version of the CLI

fdk —version

Step 3: Authenticate the CLI​

Before we start creating a theme we must first authenticate using the CLI for the next commands to work. You can use your registered mobile number or email. For mobile OTP login use the below command.

fdk login -m <mobile_number>

An OTP will be sent to the mobile number after which you can enter the OTP into the prompt. In case of email & password login, use the below command.

fdk login -e <email_id>

You will be prompted to enter your password. Enter your password to authenticate the CLI.

Step 4: Download the merchant’s theme​

To clone the merchant’s theme code you will need the theme token. Once you have the theme token you can execute the below command.

fdk theme init -t <theme_token>

Once the command is executed successfully you can open the theme code inside any IDE of your liking.

Step 5: Customisation​

After you've downloaded the merchant's theme, you can make any necessary changes to the theme code. For example, you can make an adjustment to the theme's CSS to change its appearance.

Step 6: Previewing your changes​

After you create your theme you can preview your changes on the local system. Execute the below command to serve your theme.

fdk theme serve

By default server-side rendering is enabled but if you want to disable it you can add --ssr false flag to disable it. After running this command a new tab will open in your default browser. In case it does not open navigate to the below URL on your browser

https://localdev.fynd.com:5001

Step 7: Syncing your code to the application​

You might now want to sync your theme to the application. To sync your theme use the below command

fdk theme sync

After syncing is complete visit the application and you should have your changes done to theme live on your application.