Skip to main content

Overview

A theme determines user interactions along with the look and feel of a Fynd Platform website. Themes provide users with a smooth and enjoyable shopping experience.

We use VueJS (v2.6) and React JS (v18.2.0) to build Fynd Platform Themes. You may use any syntax that VueJS (v2.6)/ React JS (v18.2.0) supports. We also provide tools and best practices to speed up the development process.

As a developer, you can build a new custom theme, customize an existing theme to match your needs, or build a theme to sell on the Fynd Partners Marketplace. You can also build extensions that extend the functionality of a theme.

Anatomy of a Fynd Platform theme​

A theme consists of templates, components, and sections that come together to make a theme. Theme code is organized with a typical directory structure with your code files as well as supporting assets such as images, stylesheets, and scripts.

If you build a theme for the Fynd Platform, you need to add a bare minimum set of features to your theme to be able to publish it on the marketplace.

Skeleton of a page​

Each page is organized as below.

QG2

Figure 1: Page Skeleton

  1. The template is a resource/page displayed on a website.
  2. The sections are added to the template.
  3. The blocks that each section contains.

Each theme contains different templates to display different pages such as home, product-listing, or cart pages. For Vue (v2.6) themes, each template is passed the data it requires to render the page in the form of a JSON object called context . In case of an action being performed by a theme such as adding an item to cart, there are special components called action components that are available across all pages and components of a theme. These components are prefixed with fdk. For themes built in React, developer can use the core useGlobalStore hook provided by engine to read data from the store.

Allowing for merchant customization​

Merchants can customize their theme from the Platform Panel using the theme editor. Developers can provide different customization options such as:

  1. Making themes modular using sections and blocks.
  2. Create global and page level settings to allow merchants to control appearance.

Theme distribution​

Themes can be distributed using the following ways:

  • Using the Fynd development kit CLI tool to sync and publish your theme.

Building a business with Fynd Partners​

Fynd partners can earn money by building themes. Some ways include:

Theme customization​

The most common theme-related task for developers is theme customization, where an existing theme is altered to meet a merchant’s needs. Customization jobs range from minor tweaks to major overhauls.

Building bespoke themes and stores​

Developers can build themes from scratch. This can be a major undertaking, and the work is usually commissioned by a single merchant with very specific requirements.

Building for the Fynd Partners Themes Marketplace​

The Fynd Partners Marketplace is one of the first stops in a merchant’s journey in launching their online store. As a Partner, you can create themes for the themes marketplace and reach a big audience of budding entrepreneurs. To be accepted into to the themes marketplace, themes must meet strict technical, maintenance, and support requirements. You should review these requirements before you start developing a theme for the store.

Tools, best practices & references​

Tools​

You can use Fynd Development Kit CLI tool to create a new theme or customize an existing one. The CLI also allows you to run the theme locally and test your features. You can also use the CLI tool to sync and publish your themes. _Learn more about Fynd Development Kit CLI.

Best practices​

To optimize your theme development experience, we have established a set of best practices to refer when you develop your theme, and use any related toolchains and processes. Our best practices include the following:

  • Designing and coding a theme - To create an optimal customer experience, and to keep your merchant's stores fast, accessible, and discoverable, you need to consider many factors. EMERGE details.
  • Tooling - As your team grows and develops, you can review our best practices around version control and file transformation.
  • Working on merchant stores - When you're developing or customizing a theme for a merchant, you should keep certain best practices in mind around security, use of tools, and collaboration.

References​


Was this section helpful?