Skip to main content

Overview

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

With hundreds and thousands of websites launching on the Internet everyday, the only factor that helps a website stand tall amongst other websites is its appearance. A rich and aesthetically good-looking website is bound to catch the attention of the visitors.

The appearance of a website is largely determined by the theme applied upon it. Not every one has the same taste and choice; therefore, it's necessary to have a wide range of themes to choose from. When it comes to Fynd Platform websites which are primarily e-commerce websites, a theme will decide the user interactions, coupled with the look and feel of the website. Ultimately, the intention is to provide a delightful shopping experience without any hiccup.

Fynd Platform themes are built using VueJS (v2.6). You can use any syntax supported by VueJS (v2.6) while developing a theme. To speed your development process, you'll get all the tools and resources from us.

Anatomy a Fynd Platform theme​

Several templates, components, and sections come together to form a theme. There's a typical directory structure which will have your theme code along with assets such as images, CSS stylesheets, and scripts.

Our theme marketplace requires you to fulfill a couple of requirements and have it a set of features correctly implemented in your theme before publishing it.

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. 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 & components of a theme. These components are prefixed with fdk. We will explore more about context & action components in upcoming sections.

Allowing for merchant customization​

Merchants can customise their theme using the theme editor available in the the Platform Panel. Developers can provide different customization options such as:

  1. Making theme modular by using sections & blocks
  2. Create global & page level settings to allow merchants to control the appearance

Theme distribution​

Themes can be distributed using following ways:-

  1. Using Fynd development kit CLI tool to sync & 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 to 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 Fynd Partners 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.

Building extension that integrate with themes​

As an app developer, you can build an extension that extends the functionality of a merchant's theme. You can build a custom app for a specific client, or build a public extension and then submit it to the Fynd Partners extensions marketplace. Learn more about building extensions that integrate with themes.

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 for creating a new or customising theme. The CLI also allows you to run the theme locally and test your features. You can also use the CLI tool to sync & 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 that you can refer to when developing your theme and any surrounding 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.
  • 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​