Skip to main content

Themes Overview

Themes not only define the look and feel of a Fynd Platform website but also determine user interactions, ensuring a seamless and enjoyable shopping experience for users.

We use VueJS (v2) to build Fynd Platform Themes. You may use any syntax that VueJS (v2) 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.

Allowing for merchant customization​

Merchants can customise 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.

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 initial steps in a merchant's journey to launch their online store. As a Partner, you have the opportunity to create themes for the Fynd Partners Themes Marketplace and reach a wide audience of aspiring entrepreneurs. In order to be accepted into the Fynd Partners Themes Marketplace, themes must meet stringent technical, maintenance, and support criteria. Therefore, it is essential to review these requirements before embarking on the development of a theme for the store.

Building extensions that integrate with themes​

As an app developer, you have the ability to create an extension that enhances the functionality of a merchant's theme. You can develop a custom app tailored to a specific client or create a public extension and submit it to the Fynd Partners extensions marketplace. To learn more about constructing extensions that seamlessly integrate with themes, please explore further resources on this topic.

Getting started tutorials​

To start building or customizing your first theme, use one of our getting started tutorials.

Tools, best practices & references​

Tools​

You can use Fynd Development Kit CLI tool to create a new theme or customise 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?