Creating product tiles

On top of Plugin Studio, we have added the ability to design and customize your product tiles in Tweakwise App and we call it: Product Tile Editor.

This tool takes away the dependency of Tweakwise development capacity and enables you to make quick (or bigger) modifications, or create complete new product tiles for your Tweakwise JS plugins.

Search & Merchandising, Recommendations and Guided Selling are covered at the moment.

The concept

Without getting too technical, the whole idea behind Tweakwise JS is to offer an easy way of integrating Tweakwise via a collection of modular and configurable plugins. Tweakwise JS offers all kinds of Tweakwise features in combination with a pre-built UI, which enables your to quickly add standardized versions of site-search, -navigation and more to your platform. Both functional behavior as looks and feel are served by Tweakwise and the only thing you have to do, is adding a single Javascript-snippet to your website. All configuration settings are done in Tweakwise App, now including the exact look and feel of your highly customized product cards. In short: high impact against low effort.

Editing Product Tiles

Although e-commerce website look very familiar in general, the information provided and looks and feel of product tiles may vary a lot. Branding has a big impact and so is the market or branch you are operating in. Second to that, product tiles are subject to change and require (minor) tweaks for several reasons, for example during Black Friday or Christmas season. As every minor change would be handled and updated by the Tweakwise development team prior to this, the Product Tile Editor gives you the power and opportunity to do updates yourself.

Once Tweakwise is implemented on your platform via Tweakwise JS (using Plugin Studio), we serve product tiles based on in App customizations. Product tiles can be applied to JS Plugins, like: Search & Merchandising, Recommendations and Guided Selling. In theory this could mean that you have multiple Product Tiles configured, and assigned different tiles to different modules. If no custom product tiles are created (or setup by Tweakwise), a default whitelabel tile will be served.

Every product tile except for the default one, is available for customizing within the Product Tile Editor.

The editor uses the principle of drag and drop to add new elements on your tile. Every element should be connected to an attribute (feed, external or derived) and has a certain amount of settings to adjust, like: fonts, sizes, colors, borders, paddings and margins.

If the editor does not provide certain settings, you can enter a css-classname and do your magic targetting the element using hooks/events of the specific Plugin.

The live preview (top right) will provide an actual representation on what the product tile will look like (by approximation, we do not include your platform styling and fonts).

All changes in the Editor will be visible on your platform after a deploy to your active environment.