From Wiki

Introduction

Content Widgets are a technology exclusive to Affiliate Window enabling affiliates to select products from the entire ShopWindow database (currently over 6 million+ products) and display them on websites or in emails in a widget.

Affiliates can use a Branded Widget designed by you that contains only products from your datafeed. An affiliate can use the branded design template and populate it with products of their own choosing.

Examples of Branded Widgets

You can create your own branded widgets and supply them to be uploaded by following the step by step process outlined below. For more detailed information please consult the Specification For Creating Merchant Branded Widgets document.

Create Background Artwork

Currently, branded widgets can be created in a range of 9 different sizes.

These sizes have been carefully selected to suit the majority of websites and page layouts, and include standard banner and blog sizes. When designing the background image for a specific widget size, it is very important to note that the actual background design space is actually slightly smaller than the final widget size.

Example of 444x90 widget background for 468x90 branded widget

The table below lists the background sizes you should supply, and the corresponding final widget sizes.

Before creating your widget designs please consult the Specification For Creating Merchant Branded Widgets document for full details of each widget size with detailed layout diagrams and dimensions.

Customising Your Design

You can customise your widget by implementing different styles and features and adding a button (or choosing a pre-designed button if necessary) to each widget.

Colours

A colour specification will need to be supplied for each of the below:

• Product Title – Title text for each product
• Description – Description text for each product (only in larger widgets)
• Price – Price text for each product
• Image Border – border colour around each product image

Font

• Typeface – choose from Arial, Verdana or Times New Roman
• Size – choose from 9px, 10px or 11px

Image

• Link – should the product image act as a clickable link
• Border – should the product image have a border

Links

• Links - open in the same window or a new window

“Buy Now” Button

• Create your own button – the button can be less than or equal to 52x18 px but no bigger
• Stock button - You can use a button design from our stock selection shown below. Simply indicate the button number you want to use when sending us your design details

Stock buttons

Checking Your Artwork

You must check that your background artwork (and button artwork if you have supplied it) are the correct size for uploading.

They must be the exact dimensions in pixels as specified in Step 1 and in the Specification Document or your account manager will be unable to upload your widgets. Please make sure that the file type is JPEG, GIF or PNG (transparency is allowed) and that your file is no bigger than 250kb.

NOTE: A Branded Widget design can be replaced at any time, simply by supplying us with an updated design.

Supplying Your Artwork

Your final designs should be sent to your account manager to be uploaded (typically your designs will be made live within 24 hours).

Design Tips

Border Padding

In the case that your design may feature a border or design detail surrounding the content, if this is the case special attention should be paid to the dimensions given between the content space and widget edge/branding space. The content is made much clearer and visibly satisfying by allowing a few pixels of padding.

Examples of bad and good padding allowance

Branding Space

Each widget has an empty space which allows room for your branding. You may like to use this area to display your company identity, logo or any graphics that you feel will make your widgets unique and branded. Don't be afraid to use the rest of the design space too, but be aware of how it will look with the widget content on top.

Transparency

When designing a background with a rounded corner, or any design that does not have sharp or square edges, be sure to supply the file as a GIF or PNG with transparency. When supplying a GIF with alpha transparency, be aware that the matte colour will affect how the widget appears on different coloured backgrounds.

Transparency types: From left to right; no transparency, GIF with transparency, GIF with alpha transparency and white matte, PNG with alpha transparency

To understand more about transparency and alpha transparency in GIFs and PNGS, please read this useful Wikipedia article.

Frequently Asked Questions

Why can't I change the layout of the content?

The content has a fixed layout which is used as a template across all branded widgets for all merchants. Your job is to simply supply a design which fits around the layout, and combined with your specification of text colours and font, creates a unique looking widget. For this reason, it is great to create something interesting and with some design flare that will set your widgets apart from the competition!

For further information and help on designing and supplying your own Branded Widgets, please contact your account manager.