Create a Theme
Get the latest developer guides on Fynd Partners Help
In this tutorial, we will use FDK CLI to create a new theme. This theme is created using the default theme template Emerge.
What will you learn?
After you've finished this tutorial, you'll have accomplished the following:
- Setup your local development environment
- Have the default template ready for you to use.
- Previewed changes made to your local code in real-time
- Sync the code to your application
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: 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 2: 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 3: Create a theme using Emerge
Now that you have successfully installed the CLI it is time to create a new theme. For this, you will need a theme token. Find your theme token here.
Next, you will need a name for your theme. Let’s say we name it Dusk, we can execute the below command. This will create a new folder with the theme name will all the necessary code required for a theme to work properly
fdk theme new -t <theme_token> -n Dusk
Now navigate to the directory of your theme name and open it any IDE of your liking
cd Dusk
Step 4: 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 5: 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 Theme panel on Fynd Platform and apply the theme you created from the theme library. Once applied you can visit your application and you should have your newly created theme live on your application.